<!doctype html><!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
--><meta charset="utf-8">
<title>TensorBoard</title>
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">













































































































































































































<style>
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/_VYFx-s824kXq_Ul2BHqYH-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/tnj4SB6DNbdaQnsM8CFqBX-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/font-roboto/NJ4vxlgWwWbEsv18dAhqnn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/isZ-wbCXNKAbnjo6_TwHToX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/77FXFjRbGzN4aCrSFhlh3oX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/jSN2CGVDbcVyCnfJfjSdfIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/UX6i4JxQDm3fVTc1CPuwqoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/97uahxiqZRoncBaCEI3aW4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/font-roboto/PwZc-YbIL414wB9rB1IAPYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcC14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcC_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcCwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcC1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcC4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcC6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(/font-roboto/t6Nd4cfPRhZP44Q5QAjcC9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/OpXUqTo0UgQQhGj_SFdLWBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/WxrXJa0C3KdtC7lMafG4dRkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/cDKhRaXnQTOVbaoxwdOr9xkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/1hZf02POANh32k2VkgEoUBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/vPcynSL0qHq_6dX7lKVByXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/vSzulfKSK0LLjjfeaxcREhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(/font-roboto/K23cxWVTrIFD6DJsEVi07RkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(/font-roboto/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0at14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0at_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0atwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0at1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0at4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0at6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(/font-roboto/7m8l7TlFO-S3VkhHuR0at9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/oHi30kwQWvpCWqAhzHcCSIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/ZLqKeelYbATG60EpZBSDy4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/mx9Uck6uB63VIKFYnEMXrYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/rGvHdJnr2l75qb0YND9NyIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/font-roboto/mbmhprMH69Zi6eEPBYVFhYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0V4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0fZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0Qt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0VBW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0Ygp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0aE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(/font-roboto/OLffGBTaF0XFOW1gnuHF0dDiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpY14sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpY_ZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpYwt_Rm691LTebKfY2ZkKSmI.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpY1BW26QxpSj-_ZKm_xT4hWw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpY4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpY6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/font-roboto/hMqPNLsu_dywMa4C_DEpY9DiNsR5a-9Oe_Ivpu8XWlY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59Fz1x-M1I1w5OMiqnVF8xBLhU.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59FzwXaAXup5mZlfK6xRLrhsco.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59Fzwn6Wqxo-xwxilDXPU8chVU.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59Fz1T7aJLK6nKpn36IMwTcMMc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59Fz_79_ZuUxCigM2DespTnFaw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59Fz4gd9OEPUCN3AdYW0e8tat4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/font-roboto/N4duVc9C58uwPiY8_59Fz8bIQSYZnWLaWC9QNCpTK_U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
</style>


<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Roboto, sans-serif;
  }
</style>






<custom-style>
  <style is="custom-style">
    [hidden] {
      display: none !important;
    }
  </style>
</custom-style>

<custom-style>
  <style is="custom-style">
    html {

      --layout: {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      };

      --layout-inline: {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
      };

      --layout-horizontal: {
        @apply --layout;

        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
      };

      --layout-horizontal-reverse: {
        @apply --layout;

        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
      };

      --layout-vertical: {
        @apply --layout;

        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
      };

      --layout-vertical-reverse: {
        @apply --layout;

        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
      };

      --layout-wrap: {
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
      };

      --layout-wrap-reverse: {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
      };

      --layout-flex-auto: {
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
      };

      --layout-flex-none: {
        -ms-flex: none;
        -webkit-flex: none;
        flex: none;
      };

      --layout-flex: {
        -ms-flex: 1 1 0.000000001px;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-basis: 0.000000001px;
        flex-basis: 0.000000001px;
      };

      --layout-flex-2: {
        -ms-flex: 2;
        -webkit-flex: 2;
        flex: 2;
      };

      --layout-flex-3: {
        -ms-flex: 3;
        -webkit-flex: 3;
        flex: 3;
      };

      --layout-flex-4: {
        -ms-flex: 4;
        -webkit-flex: 4;
        flex: 4;
      };

      --layout-flex-5: {
        -ms-flex: 5;
        -webkit-flex: 5;
        flex: 5;
      };

      --layout-flex-6: {
        -ms-flex: 6;
        -webkit-flex: 6;
        flex: 6;
      };

      --layout-flex-7: {
        -ms-flex: 7;
        -webkit-flex: 7;
        flex: 7;
      };

      --layout-flex-8: {
        -ms-flex: 8;
        -webkit-flex: 8;
        flex: 8;
      };

      --layout-flex-9: {
        -ms-flex: 9;
        -webkit-flex: 9;
        flex: 9;
      };

      --layout-flex-10: {
        -ms-flex: 10;
        -webkit-flex: 10;
        flex: 10;
      };

      --layout-flex-11: {
        -ms-flex: 11;
        -webkit-flex: 11;
        flex: 11;
      };

      --layout-flex-12: {
        -ms-flex: 12;
        -webkit-flex: 12;
        flex: 12;
      };

      /* alignment in cross axis */

      --layout-start: {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
      };

      --layout-center: {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      };

      --layout-end: {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
      };

      --layout-baseline: {
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
      };

      /* alignment in main axis */

      --layout-start-justified: {
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
      };

      --layout-center-justified: {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
      };

      --layout-end-justified: {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
      };

      --layout-around-justified: {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
      };

      --layout-justified: {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
      };

      --layout-center-center: {
        @apply --layout-center;
        @apply --layout-center-justified;
      };

      /* self alignment */

      --layout-self-start: {
        -ms-align-self: flex-start;
        -webkit-align-self: flex-start;
        align-self: flex-start;
      };

      --layout-self-center: {
        -ms-align-self: center;
        -webkit-align-self: center;
        align-self: center;
      };

      --layout-self-end: {
        -ms-align-self: flex-end;
        -webkit-align-self: flex-end;
        align-self: flex-end;
      };

      --layout-self-stretch: {
        -ms-align-self: stretch;
        -webkit-align-self: stretch;
        align-self: stretch;
      };

      --layout-self-baseline: {
        -ms-align-self: baseline;
        -webkit-align-self: baseline;
        align-self: baseline;
      };

      /* multi-line alignment in main axis */

      --layout-start-aligned: {
        -ms-flex-line-pack: start;  /* IE10 */
        -ms-align-content: flex-start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
      };

      --layout-end-aligned: {
        -ms-flex-line-pack: end;  /* IE10 */
        -ms-align-content: flex-end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
      };

      --layout-center-aligned: {
        -ms-flex-line-pack: center;  /* IE10 */
        -ms-align-content: center;
        -webkit-align-content: center;
        align-content: center;
      };

      --layout-between-aligned: {
        -ms-flex-line-pack: justify;  /* IE10 */
        -ms-align-content: space-between;
        -webkit-align-content: space-between;
        align-content: space-between;
      };

      --layout-around-aligned: {
        -ms-flex-line-pack: distribute;  /* IE10 */
        -ms-align-content: space-around;
        -webkit-align-content: space-around;
        align-content: space-around;
      };

      /*******************************
                Other Layout
      *******************************/

      --layout-block: {
        display: block;
      };

      --layout-invisible: {
        visibility: hidden !important;
      };

      --layout-relative: {
        position: relative;
      };

      --layout-fit: {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      };

      --layout-scroll: {
        -webkit-overflow-scrolling: touch;
        overflow: auto;
      };

      --layout-fullbleed: {
        margin: 0;
        height: 100vh;
      };

      /* fixed position */

      --layout-fixed-top: {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      };

      --layout-fixed-right: {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
      };

      --layout-fixed-bottom: {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
      };

      --layout-fixed-left: {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
      };

    }
  </style>
</custom-style>





















<dom-module id="paper-ripple">

  <template>
    <style>
      :host {
        display: block;
        position: absolute;
        border-radius: inherit;
        overflow: hidden;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
         * creating a node (with a position:absolute) in the middle of an event
         * handler "interrupts" that event handler (which happens when the
         * ripple is created on demand) */
        pointer-events: none;
      }

      :host([animating]) {
        /* This resolves a rendering issue in Chrome (as of 40) where the
           ripple is not properly clipped by its parent (which may have
           rounded corners). See: http://jsbin.com/temexa/4

           Note: We only apply this style conditionally. Otherwise, the browser
           will create a new compositing layer for every ripple element on the
           page, and that would be bad. */
        -webkit-transform: translate(0, 0);
        transform: translate3d(0, 0, 0);
      }

      #background,
      #waves,
      .wave-container,
      .wave {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      #background,
      .wave {
        opacity: 0;
      }

      #waves,
      .wave {
        overflow: hidden;
      }

      .wave-container,
      .wave {
        border-radius: 50%;
      }

      :host(.circle) #background,
      :host(.circle) #waves {
        border-radius: 50%;
      }

      :host(.circle) .wave-container {
        overflow: hidden;
      }
    </style>

    <div id="background"></div>
    <div id="waves"></div>
  </template>
</dom-module>











<custom-style>
  <style is="custom-style">
    html {

      --shadow-transition: {
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      };

      --shadow-none: {
        box-shadow: none;
      };

      /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */

      --shadow-elevation-2dp: {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
      };

      --shadow-elevation-3dp: {
        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
                    0 1px 8px 0 rgba(0, 0, 0, 0.12),
                    0 3px 3px -2px rgba(0, 0, 0, 0.4);
      };

      --shadow-elevation-4dp: {
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                    0 1px 10px 0 rgba(0, 0, 0, 0.12),
                    0 2px 4px -1px rgba(0, 0, 0, 0.4);
      };

      --shadow-elevation-6dp: {
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
                    0 1px 18px 0 rgba(0, 0, 0, 0.12),
                    0 3px 5px -1px rgba(0, 0, 0, 0.4);
      };

      --shadow-elevation-8dp: {
        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
                    0 5px 5px -3px rgba(0, 0, 0, 0.4);
      };

      --shadow-elevation-12dp: {
        box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
                    0 4px 22px 3px rgba(0, 0, 0, 0.12),
                    0 6px 7px -4px rgba(0, 0, 0, 0.4);
      };

      --shadow-elevation-16dp: {
        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                    0  6px 30px 5px rgba(0, 0, 0, 0.12),
                    0  8px 10px -5px rgba(0, 0, 0, 0.4);
      };

      --shadow-elevation-24dp: {
        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
                    0 9px 46px 8px rgba(0, 0, 0, 0.12),
                    0 11px 15px -7px rgba(0, 0, 0, 0.4);
      };
    }
  </style>
</custom-style>




<dom-module id="paper-material-styles">
  <template>
    <style>
      :host, html {
        --paper-material: {
          display: block;
          position: relative;
        };
        --paper-material-elevation-1: {
          @apply --shadow-elevation-2dp;
        };
        --paper-material-elevation-2: {
          @apply --shadow-elevation-4dp;
        };
        --paper-material-elevation-3: {
          @apply --shadow-elevation-6dp;
        };
        --paper-material-elevation-4: {
          @apply --shadow-elevation-8dp;
        };
        --paper-material-elevation-5: {
          @apply --shadow-elevation-16dp;
        };
      }
      :host(.paper-material), .paper-material {
        @apply --paper-material;
      }
      :host(.paper-material[elevation="1"]), .paper-material[elevation="1"] {
        @apply --paper-material-elevation-1;
      }
      :host(.paper-material[elevation="2"]), .paper-material[elevation="2"] {
        @apply --paper-material-elevation-2;
      }
      :host(.paper-material[elevation="3"]), .paper-material[elevation="3"] {
        @apply --paper-material-elevation-3;
      }
      :host(.paper-material[elevation="4"]), .paper-material[elevation="4"] {
        @apply --paper-material-elevation-4;
      }
      :host(.paper-material[elevation="5"]), .paper-material[elevation="5"] {
        @apply --paper-material-elevation-5;
      }
    </style>
  </template>
</dom-module>




<dom-module id="paper-button">
  <template strip-whitespace>
    <style include="paper-material-styles">
      /* Need to specify the same specificity as the styles imported from paper-material. */
      :host {
        @apply --layout-inline;
        @apply --layout-center-center;
        position: relative;
        box-sizing: border-box;
        min-width: 5.14em;
        margin: 0 0.29em;
        background: transparent;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        font: inherit;
        text-transform: uppercase;
        outline-width: 0;
        border-radius: 3px;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
        z-index: 0;
        padding: 0.7em 0.57em;

        @apply --paper-font-common-base;
        @apply --paper-button;
      }

      :host([elevation="1"]) {
        @apply --paper-material-elevation-1;
      }

      :host([elevation="2"]) {
        @apply --paper-material-elevation-2;
      }

      :host([elevation="3"]) {
        @apply --paper-material-elevation-3;
      }

      :host([elevation="4"]) {
        @apply --paper-material-elevation-4;
      }

      :host([elevation="5"]) {
        @apply --paper-material-elevation-5;
      }

      :host([hidden]) {
        display: none !important;
      }

      :host([raised].keyboard-focus) {
        font-weight: bold;
        @apply --paper-button-raised-keyboard-focus;
      }

      :host(:not([raised]).keyboard-focus) {
        font-weight: bold;
        @apply --paper-button-flat-keyboard-focus;
      }

      :host([disabled]) {
        background: #eaeaea;
        color: #a8a8a8;
        cursor: auto;
        pointer-events: none;

        @apply --paper-button-disabled;
      }

      :host([animated]) {
        @apply --shadow-transition;
      }

      paper-ripple {
        color: var(--paper-button-ink-color);
      }
    </style>

    <slot></slot>
  </template>

  
</dom-module>





<custom-style>
  <style is="custom-style">
    html {

      /* Material Design color palette for Google products */

      --google-red-100: #f4c7c3;
      --google-red-300: #e67c73;
      --google-red-500: #db4437;
      --google-red-700: #c53929;

      --google-blue-100: #c6dafc;
      --google-blue-300: #7baaf7;
      --google-blue-500: #4285f4;
      --google-blue-700: #3367d6;

      --google-green-100: #b7e1cd;
      --google-green-300: #57bb8a;
      --google-green-500: #0f9d58;
      --google-green-700: #0b8043;

      --google-yellow-100: #fce8b2;
      --google-yellow-300: #f7cb4d;
      --google-yellow-500: #f4b400;
      --google-yellow-700: #f09300;

      --google-grey-100: #f5f5f5;
      --google-grey-300: #e0e0e0;
      --google-grey-500: #9e9e9e;
      --google-grey-700: #616161;

      /* Material Design color palette from online spec document */

      --paper-red-50: #ffebee;
      --paper-red-100: #ffcdd2;
      --paper-red-200: #ef9a9a;
      --paper-red-300: #e57373;
      --paper-red-400: #ef5350;
      --paper-red-500: #f44336;
      --paper-red-600: #e53935;
      --paper-red-700: #d32f2f;
      --paper-red-800: #c62828;
      --paper-red-900: #b71c1c;
      --paper-red-a100: #ff8a80;
      --paper-red-a200: #ff5252;
      --paper-red-a400: #ff1744;
      --paper-red-a700: #d50000;

      --paper-pink-50: #fce4ec;
      --paper-pink-100: #f8bbd0;
      --paper-pink-200: #f48fb1;
      --paper-pink-300: #f06292;
      --paper-pink-400: #ec407a;
      --paper-pink-500: #e91e63;
      --paper-pink-600: #d81b60;
      --paper-pink-700: #c2185b;
      --paper-pink-800: #ad1457;
      --paper-pink-900: #880e4f;
      --paper-pink-a100: #ff80ab;
      --paper-pink-a200: #ff4081;
      --paper-pink-a400: #f50057;
      --paper-pink-a700: #c51162;

      --paper-purple-50: #f3e5f5;
      --paper-purple-100: #e1bee7;
      --paper-purple-200: #ce93d8;
      --paper-purple-300: #ba68c8;
      --paper-purple-400: #ab47bc;
      --paper-purple-500: #9c27b0;
      --paper-purple-600: #8e24aa;
      --paper-purple-700: #7b1fa2;
      --paper-purple-800: #6a1b9a;
      --paper-purple-900: #4a148c;
      --paper-purple-a100: #ea80fc;
      --paper-purple-a200: #e040fb;
      --paper-purple-a400: #d500f9;
      --paper-purple-a700: #aa00ff;

      --paper-deep-purple-50: #ede7f6;
      --paper-deep-purple-100: #d1c4e9;
      --paper-deep-purple-200: #b39ddb;
      --paper-deep-purple-300: #9575cd;
      --paper-deep-purple-400: #7e57c2;
      --paper-deep-purple-500: #673ab7;
      --paper-deep-purple-600: #5e35b1;
      --paper-deep-purple-700: #512da8;
      --paper-deep-purple-800: #4527a0;
      --paper-deep-purple-900: #311b92;
      --paper-deep-purple-a100: #b388ff;
      --paper-deep-purple-a200: #7c4dff;
      --paper-deep-purple-a400: #651fff;
      --paper-deep-purple-a700: #6200ea;

      --paper-indigo-50: #e8eaf6;
      --paper-indigo-100: #c5cae9;
      --paper-indigo-200: #9fa8da;
      --paper-indigo-300: #7986cb;
      --paper-indigo-400: #5c6bc0;
      --paper-indigo-500: #3f51b5;
      --paper-indigo-600: #3949ab;
      --paper-indigo-700: #303f9f;
      --paper-indigo-800: #283593;
      --paper-indigo-900: #1a237e;
      --paper-indigo-a100: #8c9eff;
      --paper-indigo-a200: #536dfe;
      --paper-indigo-a400: #3d5afe;
      --paper-indigo-a700: #304ffe;

      --paper-blue-50: #e3f2fd;
      --paper-blue-100: #bbdefb;
      --paper-blue-200: #90caf9;
      --paper-blue-300: #64b5f6;
      --paper-blue-400: #42a5f5;
      --paper-blue-500: #2196f3;
      --paper-blue-600: #1e88e5;
      --paper-blue-700: #1976d2;
      --paper-blue-800: #1565c0;
      --paper-blue-900: #0d47a1;
      --paper-blue-a100: #82b1ff;
      --paper-blue-a200: #448aff;
      --paper-blue-a400: #2979ff;
      --paper-blue-a700: #2962ff;

      --paper-light-blue-50: #e1f5fe;
      --paper-light-blue-100: #b3e5fc;
      --paper-light-blue-200: #81d4fa;
      --paper-light-blue-300: #4fc3f7;
      --paper-light-blue-400: #29b6f6;
      --paper-light-blue-500: #03a9f4;
      --paper-light-blue-600: #039be5;
      --paper-light-blue-700: #0288d1;
      --paper-light-blue-800: #0277bd;
      --paper-light-blue-900: #01579b;
      --paper-light-blue-a100: #80d8ff;
      --paper-light-blue-a200: #40c4ff;
      --paper-light-blue-a400: #00b0ff;
      --paper-light-blue-a700: #0091ea;

      --paper-cyan-50: #e0f7fa;
      --paper-cyan-100: #b2ebf2;
      --paper-cyan-200: #80deea;
      --paper-cyan-300: #4dd0e1;
      --paper-cyan-400: #26c6da;
      --paper-cyan-500: #00bcd4;
      --paper-cyan-600: #00acc1;
      --paper-cyan-700: #0097a7;
      --paper-cyan-800: #00838f;
      --paper-cyan-900: #006064;
      --paper-cyan-a100: #84ffff;
      --paper-cyan-a200: #18ffff;
      --paper-cyan-a400: #00e5ff;
      --paper-cyan-a700: #00b8d4;

      --paper-teal-50: #e0f2f1;
      --paper-teal-100: #b2dfdb;
      --paper-teal-200: #80cbc4;
      --paper-teal-300: #4db6ac;
      --paper-teal-400: #26a69a;
      --paper-teal-500: #009688;
      --paper-teal-600: #00897b;
      --paper-teal-700: #00796b;
      --paper-teal-800: #00695c;
      --paper-teal-900: #004d40;
      --paper-teal-a100: #a7ffeb;
      --paper-teal-a200: #64ffda;
      --paper-teal-a400: #1de9b6;
      --paper-teal-a700: #00bfa5;

      --paper-green-50: #e8f5e9;
      --paper-green-100: #c8e6c9;
      --paper-green-200: #a5d6a7;
      --paper-green-300: #81c784;
      --paper-green-400: #66bb6a;
      --paper-green-500: #4caf50;
      --paper-green-600: #43a047;
      --paper-green-700: #388e3c;
      --paper-green-800: #2e7d32;
      --paper-green-900: #1b5e20;
      --paper-green-a100: #b9f6ca;
      --paper-green-a200: #69f0ae;
      --paper-green-a400: #00e676;
      --paper-green-a700: #00c853;

      --paper-light-green-50: #f1f8e9;
      --paper-light-green-100: #dcedc8;
      --paper-light-green-200: #c5e1a5;
      --paper-light-green-300: #aed581;
      --paper-light-green-400: #9ccc65;
      --paper-light-green-500: #8bc34a;
      --paper-light-green-600: #7cb342;
      --paper-light-green-700: #689f38;
      --paper-light-green-800: #558b2f;
      --paper-light-green-900: #33691e;
      --paper-light-green-a100: #ccff90;
      --paper-light-green-a200: #b2ff59;
      --paper-light-green-a400: #76ff03;
      --paper-light-green-a700: #64dd17;

      --paper-lime-50: #f9fbe7;
      --paper-lime-100: #f0f4c3;
      --paper-lime-200: #e6ee9c;
      --paper-lime-300: #dce775;
      --paper-lime-400: #d4e157;
      --paper-lime-500: #cddc39;
      --paper-lime-600: #c0ca33;
      --paper-lime-700: #afb42b;
      --paper-lime-800: #9e9d24;
      --paper-lime-900: #827717;
      --paper-lime-a100: #f4ff81;
      --paper-lime-a200: #eeff41;
      --paper-lime-a400: #c6ff00;
      --paper-lime-a700: #aeea00;

      --paper-yellow-50: #fffde7;
      --paper-yellow-100: #fff9c4;
      --paper-yellow-200: #fff59d;
      --paper-yellow-300: #fff176;
      --paper-yellow-400: #ffee58;
      --paper-yellow-500: #ffeb3b;
      --paper-yellow-600: #fdd835;
      --paper-yellow-700: #fbc02d;
      --paper-yellow-800: #f9a825;
      --paper-yellow-900: #f57f17;
      --paper-yellow-a100: #ffff8d;
      --paper-yellow-a200: #ffff00;
      --paper-yellow-a400: #ffea00;
      --paper-yellow-a700: #ffd600;

      --paper-amber-50: #fff8e1;
      --paper-amber-100: #ffecb3;
      --paper-amber-200: #ffe082;
      --paper-amber-300: #ffd54f;
      --paper-amber-400: #ffca28;
      --paper-amber-500: #ffc107;
      --paper-amber-600: #ffb300;
      --paper-amber-700: #ffa000;
      --paper-amber-800: #ff8f00;
      --paper-amber-900: #ff6f00;
      --paper-amber-a100: #ffe57f;
      --paper-amber-a200: #ffd740;
      --paper-amber-a400: #ffc400;
      --paper-amber-a700: #ffab00;

      --paper-orange-50: #fff3e0;
      --paper-orange-100: #ffe0b2;
      --paper-orange-200: #ffcc80;
      --paper-orange-300: #ffb74d;
      --paper-orange-400: #ffa726;
      --paper-orange-500: #ff9800;
      --paper-orange-600: #fb8c00;
      --paper-orange-700: #f57c00;
      --paper-orange-800: #ef6c00;
      --paper-orange-900: #e65100;
      --paper-orange-a100: #ffd180;
      --paper-orange-a200: #ffab40;
      --paper-orange-a400: #ff9100;
      --paper-orange-a700: #ff6500;

      --paper-deep-orange-50: #fbe9e7;
      --paper-deep-orange-100: #ffccbc;
      --paper-deep-orange-200: #ffab91;
      --paper-deep-orange-300: #ff8a65;
      --paper-deep-orange-400: #ff7043;
      --paper-deep-orange-500: #ff5722;
      --paper-deep-orange-600: #f4511e;
      --paper-deep-orange-700: #e64a19;
      --paper-deep-orange-800: #d84315;
      --paper-deep-orange-900: #bf360c;
      --paper-deep-orange-a100: #ff9e80;
      --paper-deep-orange-a200: #ff6e40;
      --paper-deep-orange-a400: #ff3d00;
      --paper-deep-orange-a700: #dd2c00;

      --paper-brown-50: #efebe9;
      --paper-brown-100: #d7ccc8;
      --paper-brown-200: #bcaaa4;
      --paper-brown-300: #a1887f;
      --paper-brown-400: #8d6e63;
      --paper-brown-500: #795548;
      --paper-brown-600: #6d4c41;
      --paper-brown-700: #5d4037;
      --paper-brown-800: #4e342e;
      --paper-brown-900: #3e2723;

      --paper-grey-50: #fafafa;
      --paper-grey-100: #f5f5f5;
      --paper-grey-200: #eeeeee;
      --paper-grey-300: #e0e0e0;
      --paper-grey-400: #bdbdbd;
      --paper-grey-500: #9e9e9e;
      --paper-grey-600: #757575;
      --paper-grey-700: #616161;
      --paper-grey-800: #424242;
      --paper-grey-900: #212121;

      --paper-blue-grey-50: #eceff1;
      --paper-blue-grey-100: #cfd8dc;
      --paper-blue-grey-200: #b0bec5;
      --paper-blue-grey-300: #90a4ae;
      --paper-blue-grey-400: #78909c;
      --paper-blue-grey-500: #607d8b;
      --paper-blue-grey-600: #546e7a;
      --paper-blue-grey-700: #455a64;
      --paper-blue-grey-800: #37474f;
      --paper-blue-grey-900: #263238;

      /* opacity for dark text on a light background */
      --dark-divider-opacity: 0.12;
      --dark-disabled-opacity: 0.38; /* or hint text or icon */
      --dark-secondary-opacity: 0.54;
      --dark-primary-opacity: 0.87;

      /* opacity for light text on a dark background */
      --light-divider-opacity: 0.12;
      --light-disabled-opacity: 0.3; /* or hint text or icon */
      --light-secondary-opacity: 0.7;
      --light-primary-opacity: 1.0;

    }

  </style>
</custom-style>




<custom-style>
  <style is="custom-style">
    html {
      /*
       * You can use these generic variables in your elements for easy theming.
       * For example, if all your elements use `--primary-text-color` as its main
       * color, then switching from a light to a dark theme is just a matter of
       * changing the value of `--primary-text-color` in your application.
       */
      --primary-text-color: var(--light-theme-text-color);
      --primary-background-color: var(--light-theme-background-color);
      --secondary-text-color: var(--light-theme-secondary-color);
      --disabled-text-color: var(--light-theme-disabled-color);
      --divider-color: var(--light-theme-divider-color);
      --error-color: var(--paper-deep-orange-a700);

      /*
       * Primary and accent colors. Also see color.html for more colors.
       */
      --primary-color: var(--paper-indigo-500);
      --light-primary-color: var(--paper-indigo-100);
      --dark-primary-color: var(--paper-indigo-700);

      --accent-color: var(--paper-pink-a200);
      --light-accent-color: var(--paper-pink-a100);
      --dark-accent-color: var(--paper-pink-a400);


      /*
       * Material Design Light background theme
       */
      --light-theme-background-color: #ffffff;
      --light-theme-base-color: #000000;
      --light-theme-text-color: var(--paper-grey-900);
      --light-theme-secondary-color: #737373;  /* for secondary text and icons */
      --light-theme-disabled-color: #9b9b9b;  /* disabled/hint text */
      --light-theme-divider-color: #dbdbdb;

      /*
       * Material Design Dark background theme
       */
      --dark-theme-background-color: var(--paper-grey-900);
      --dark-theme-base-color: #ffffff;
      --dark-theme-text-color: #ffffff;
      --dark-theme-secondary-color: #bcbcbc;  /* for secondary text and icons */
      --dark-theme-disabled-color: #646464;  /* disabled/hint text */
      --dark-theme-divider-color: #3c3c3c;

      /*
       * Deprecated values because of their confusing names.
       */
      --text-primary-color: var(--dark-theme-text-color);
      --default-primary-color: var(--primary-color);
    }
  </style>
</custom-style>
































<dom-module id="paper-checkbox">
  <template strip-whitespace>
    <style>
      :host {
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
        --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
        /* -1px is a sentinel for the default and is replaced in `attached`. */
        --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
        @apply --paper-font-common-base;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
      }

      :host([hidden]) {
        display: none !important;
      }

      :host(:focus) {
        outline: none;
      }

      .hidden {
        display: none;
      }

      #checkboxContainer {
        display: inline-block;
        position: relative;
        width: var(--calculated-paper-checkbox-size);
        height: var(--calculated-paper-checkbox-size);
        min-width: var(--calculated-paper-checkbox-size);
        margin: var(--paper-checkbox-margin, initial);
        vertical-align: var(--paper-checkbox-vertical-align, middle);
        background-color: var(--paper-checkbox-unchecked-background-color, transparent);
      }

      #ink {
        position: absolute;

        /* Center the ripple in the checkbox by negative offsetting it by
         * (inkWidth - rippleWidth) / 2 */
        top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
        left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
        width: var(--calculated-paper-checkbox-ink-size);
        height: var(--calculated-paper-checkbox-ink-size);
        color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color));
        opacity: 0.6;
        pointer-events: none;
      }

      #ink:dir(rtl) {
        right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
        left: auto;
      }

      #ink[checked] {
        color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
      }

      #checkbox {
        position: relative;
        box-sizing: border-box;
        height: 100%;
        border: solid 2px;
        border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
        border-radius: 2px;
        pointer-events: none;
        -webkit-transition: background-color 140ms, border-color 140ms;
        transition: background-color 140ms, border-color 140ms;
      }

      /* checkbox checked animations */
      #checkbox.checked #checkmark {
        -webkit-animation: checkmark-expand 140ms ease-out forwards;
        animation: checkmark-expand 140ms ease-out forwards;
      }

      @-webkit-keyframes checkmark-expand {
        0% {
          -webkit-transform: scale(0, 0) rotate(45deg);
        }
        100% {
          -webkit-transform: scale(1, 1) rotate(45deg);
        }
      }

      @keyframes checkmark-expand {
        0% {
          transform: scale(0, 0) rotate(45deg);
        }
        100% {
          transform: scale(1, 1) rotate(45deg);
        }
      }

      #checkbox.checked {
        background-color: var(--paper-checkbox-checked-color, var(--primary-color));
        border-color: var(--paper-checkbox-checked-color, var(--primary-color));
      }

      #checkmark {
        position: absolute;
        width: 36%;
        height: 70%;
        border-style: solid;
        border-top: none;
        border-left: none;
        border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
        border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
        border-color: var(--paper-checkbox-checkmark-color, white);
        -webkit-transform-origin: 97% 86%;
        transform-origin: 97% 86%;
        box-sizing: content-box; /* protect against page-level box-sizing */
      }

      #checkmark:dir(rtl) {
        -webkit-transform-origin: 50% 14%;
        transform-origin: 50% 14%;
      }

      /* label */
      #checkboxLabel {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        padding-left: var(--paper-checkbox-label-spacing, 8px);
        white-space: normal;
        line-height: normal;
        color: var(--paper-checkbox-label-color, var(--primary-text-color));
        @apply --paper-checkbox-label;
      }

      :host([checked]) #checkboxLabel {
        color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
        @apply --paper-checkbox-label-checked;
      }

      #checkboxLabel:dir(rtl) {
        padding-right: var(--paper-checkbox-label-spacing, 8px);
        padding-left: 0;
      }

      #checkboxLabel[hidden] {
        display: none;
      }

      /* disabled state */

      :host([disabled]) #checkbox {
        opacity: 0.5;
        border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
      }

      :host([disabled][checked]) #checkbox {
        background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
        opacity: 0.5;
      }

      :host([disabled]) #checkboxLabel  {
        opacity: 0.65;
      }

      /* invalid state */
      #checkbox.invalid:not(.checked) {
        border-color: var(--paper-checkbox-error-color, var(--error-color));
      }
    </style>

    <div id="checkboxContainer">
      <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
        <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
      </div>
    </div>

    <div id="checkboxLabel"><slot></slot></div>
  </template>

  
</dom-module>












<dom-module id="iron-icon">
  <template>
    <style>
      :host {
        @apply --layout-inline;
        @apply --layout-center-center;
        position: relative;

        vertical-align: middle;

        fill: var(--iron-icon-fill-color, currentcolor);
        stroke: var(--iron-icon-stroke-color, none);

        width: var(--iron-icon-width, 24px);
        height: var(--iron-icon-height, 24px);
        @apply --iron-icon;
      }

      :host([hidden]) {
        display: none;
      }
    </style>
  </template>

  

</dom-module>









<dom-module id="iron-a11y-announcer">
  <template>
    <style>
      :host {
        display: inline-block;
        position: fixed;
        clip: rect(0px,0px,0px,0px);
      }
    </style>
    <div aria-live$="[[mode]]">[[_text]]</div>
  </template>

  
</dom-module>





<dom-module id="iron-input">
  <template>
    <style>
      :host {
        display: inline-block;
      }
    </style>
    <slot id="content"></slot>
  </template>
  
</dom-module>












<custom-style>
  <style is="custom-style">
    html {

      /* Shared Styles */
      --paper-font-common-base: {
        font-family: 'Roboto', 'Noto', sans-serif;
        -webkit-font-smoothing: antialiased;
      };

      --paper-font-common-code: {
        font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
        -webkit-font-smoothing: antialiased;
      };

      --paper-font-common-expensive-kerning: {
        text-rendering: optimizeLegibility;
      };

      --paper-font-common-nowrap: {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      };

      /* Material Font Styles */

      --paper-font-display4: {
        @apply --paper-font-common-base;
        @apply --paper-font-common-nowrap;

        font-size: 112px;
        font-weight: 300;
        letter-spacing: -.044em;
        line-height: 120px;
      };

      --paper-font-display3: {
        @apply --paper-font-common-base;
        @apply --paper-font-common-nowrap;

        font-size: 56px;
        font-weight: 400;
        letter-spacing: -.026em;
        line-height: 60px;
      };

      --paper-font-display2: {
        @apply --paper-font-common-base;

        font-size: 45px;
        font-weight: 400;
        letter-spacing: -.018em;
        line-height: 48px;
      };

      --paper-font-display1: {
        @apply --paper-font-common-base;

        font-size: 34px;
        font-weight: 400;
        letter-spacing: -.01em;
        line-height: 40px;
      };

      --paper-font-headline: {
        @apply --paper-font-common-base;

        font-size: 24px;
        font-weight: 400;
        letter-spacing: -.012em;
        line-height: 32px;
      };

      --paper-font-title: {
        @apply --paper-font-common-base;
        @apply --paper-font-common-nowrap;

        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
      };

      --paper-font-subhead: {
        @apply --paper-font-common-base;

        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
      };

      --paper-font-body2: {
        @apply --paper-font-common-base;

        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
      };

      --paper-font-body1: {
        @apply --paper-font-common-base;

        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
      };

      --paper-font-caption: {
        @apply --paper-font-common-base;
        @apply --paper-font-common-nowrap;

        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.011em;
        line-height: 20px;
      };

      --paper-font-menu: {
        @apply --paper-font-common-base;
        @apply --paper-font-common-nowrap;

        font-size: 13px;
        font-weight: 500;
        line-height: 24px;
      };

      --paper-font-button: {
        @apply --paper-font-common-base;
        @apply --paper-font-common-nowrap;

        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.018em;
        line-height: 24px;
        text-transform: uppercase;
      };

      --paper-font-code2: {
        @apply --paper-font-common-code;

        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
      };

      --paper-font-code1: {
        @apply --paper-font-common-code;

        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
      };

    }

  </style>
</custom-style>








<dom-module id="paper-input-char-counter">
  <template>
    <style>
      :host {
        display: inline-block;
        float: right;

        @apply --paper-font-caption;
        @apply --paper-input-char-counter;
      }

      :host([hidden]) {
        display: none !important;
      }

      :host(:dir(rtl)) {
        float: left;
      }
    </style>

    <span>[[_charCounterStr]]</span>
  </template>
</dom-module>










<custom-style>
  <style is="custom-style">
    html {
      --paper-input-container-shared-input-style: {
        position: relative; /* to make a stacking context */
        outline: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        background: transparent;
        border: none;
        color: var(--paper-input-container-input-color, var(--primary-text-color));
        -webkit-appearance: none;
        text-align: inherit;
        vertical-align: bottom;

        @apply --paper-font-subhead;
      };
    }
  </style>
</custom-style>

<dom-module id="paper-input-container">
  <template>
    <style>
      :host {
        display: block;
        padding: 8px 0;
        @apply --paper-input-container;
      }

      :host([inline]) {
        display: inline-block;
      }

      :host([disabled]) {
        pointer-events: none;
        opacity: 0.33;

        @apply --paper-input-container-disabled;
      }

      :host([hidden]) {
        display: none !important;
      }

      [hidden] {
        display: none !important;
      }

      .floated-label-placeholder {
        @apply --paper-font-caption;
      }

      .underline {
        height: 2px;
        position: relative;
      }

      .focused-line {
        @apply --layout-fit;
        border-bottom: 2px solid var(--paper-input-container-focus-color, var(--primary-color));

        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);

        @apply --paper-input-container-underline-focus;
      }

      .underline.is-highlighted .focused-line {
        -webkit-transform: none;
        transform: none;
        -webkit-transition: -webkit-transform 0.25s;
        transition: transform 0.25s;

        @apply --paper-transition-easing;
      }

      .underline.is-invalid .focused-line {
        border-color: var(--paper-input-container-invalid-color, var(--error-color));
        -webkit-transform: none;
        transform: none;
        -webkit-transition: -webkit-transform 0.25s;
        transition: transform 0.25s;

        @apply --paper-transition-easing;
      }

      .unfocused-line {
        @apply --layout-fit;
        border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
        @apply --paper-input-container-underline;
      }

      :host([disabled]) .unfocused-line {
        border-bottom: 1px dashed;
        border-color: var(--paper-input-container-color, var(--secondary-text-color));
        @apply --paper-input-container-underline-disabled;
      }

      .input-wrapper {
        @apply --layout-horizontal;
        @apply --layout-center;
        position: relative;
      }

      .input-content {
        @apply --layout-flex-auto;
        @apply --layout-relative;
        max-width: 100%;
      }

      .input-content ::slotted(label),
      .input-content ::slotted(.paper-input-label) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        font: inherit;
        color: var(--paper-input-container-color, var(--secondary-text-color));
        -webkit-transition: -webkit-transform 0.25s, width 0.25s;
        transition: transform 0.25s, width 0.25s;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        /* Fix for safari not focusing 0-height date/time inputs with -webkit-apperance: none; */
        min-height: 1px;

        @apply --paper-font-common-nowrap;
        @apply --paper-font-subhead;
        @apply --paper-input-container-label;
        @apply --paper-transition-easing;
      }

      .input-content.label-is-floating ::slotted(label),
      .input-content.label-is-floating ::slotted(.paper-input-label) {
        -webkit-transform: translateY(-75%) scale(0.75);
        transform: translateY(-75%) scale(0.75);

        /* Since we scale to 75/100 of the size, we actually have 100/75 of the
        original space now available */
        width: 133%;

        @apply --paper-input-container-label-floating;
      }

      :host(:dir(rtl)) .input-content.label-is-floating ::slotted(label),
      :host(:dir(rtl)) .input-content.label-is-floating ::slotted(.paper-input-label) {
        right: 0;
        left: auto;
        -webkit-transform-origin: right top;
        transform-origin: right top;
      }

      .input-content.label-is-highlighted ::slotted(label),
      .input-content.label-is-highlighted ::slotted(.paper-input-label) {
        color: var(--paper-input-container-focus-color, var(--primary-color));

        @apply --paper-input-container-label-focus;
      }

      .input-content.is-invalid ::slotted(label),
      .input-content.is-invalid ::slotted(.paper-input-label) {
        color: var(--paper-input-container-invalid-color, var(--error-color));
      }

      .input-content.label-is-hidden ::slotted(label),
      .input-content.label-is-hidden ::slotted(.paper-input-label) {
        visibility: hidden;
      }

      .input-content ::slotted(input),
      .input-content ::slotted(iron-input),
      .input-content ::slotted(textarea),
      .input-content ::slotted(iron-autogrow-textarea),
      .input-content ::slotted(.paper-input-input) {
        @apply --paper-input-container-shared-input-style;
        /* The apply shim doesn't apply the nested color custom property,
          so we have to re-apply it here. */
        color: var(--paper-input-container-input-color, var(--primary-text-color));
        @apply --paper-input-container-input;
      }

      .input-content ::slotted(input)::-webkit-outer-spin-button,
      .input-content ::slotted(input)::-webkit-inner-spin-button {
        @apply --paper-input-container-input-webkit-spinner;
      }

      .input-content.focused ::slotted(input),
      .input-content.focused ::slotted(iron-input),
      .input-content.focused ::slotted(textarea),
      .input-content.focused ::slotted(iron-autogrow-textarea),
      .input-content.focused ::slotted(.paper-input-input) {
        @apply --paper-input-container-input-focus;
      }

      .input-content.is-invalid ::slotted(input),
      .input-content.is-invalid ::slotted(iron-input),
      .input-content.is-invalid ::slotted(textarea),
      .input-content.is-invalid ::slotted(iron-autogrow-textarea),
      .input-content.is-invalid ::slotted(.paper-input-input) {
        @apply --paper-input-container-input-invalid;
      }

      .prefix ::slotted(*) {
        display: inline-block;
        @apply --paper-font-subhead;
        @apply --layout-flex-none;
        @apply --paper-input-prefix;
      }

      .suffix ::slotted(*) {
        display: inline-block;
        @apply --paper-font-subhead;
        @apply --layout-flex-none;

        @apply --paper-input-suffix;
      }

      /* Firefox sets a min-width on the input, which can cause layout issues */
      .input-content ::slotted(input) {
        min-width: 0;
      }

      .input-content ::slotted(textarea) {
        resize: none;
      }

      .add-on-content {
        position: relative;
      }

      .add-on-content.is-invalid ::slotted(*) {
        color: var(--paper-input-container-invalid-color, var(--error-color));
      }

      .add-on-content.is-highlighted ::slotted(*) {
        color: var(--paper-input-container-focus-color, var(--primary-color));
      }
    </style>

    <div class="floated-label-placeholder" aria-hidden="true" hidden="[[noLabelFloat]]">&nbsp;</div>

    <div class="input-wrapper">
      <span class="prefix"><slot name="prefix"></slot></span>

      <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]" id="labelAndInputContainer">
        <slot name="label"></slot>
        <slot name="input"></slot>
      </div>

      <span class="suffix"><slot name="suffix"></slot></span>
    </div>

    <div class$="[[_computeUnderlineClass(focused,invalid)]]">
      <div class="unfocused-line"></div>
      <div class="focused-line"></div>
    </div>

    <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
      <slot name="add-on"></slot>
    </div>
  </template>
</dom-module>










<dom-module id="paper-input-error">
  <template>
    <style>
      :host {
        display: inline-block;
        visibility: hidden;

        color: var(--paper-input-container-invalid-color, var(--error-color));

        @apply --paper-font-caption;
        @apply --paper-input-error;
        position: absolute;
        left:0;
        right:0;
      }

      :host([invalid]) {
        visibility: visible;
      };
    </style>

    <slot></slot>
  </template>
</dom-module>






<dom-module id="paper-input">
  <template>
    <style>
      :host {
        display: block;
      }

      :host([focused]) {
        outline: none;
      }

      :host([hidden]) {
        display: none !important;
      }

      input {
        /* Firefox sets a min-width on the input, which can cause layout issues */
        min-width: 0;
      }

      /* In 1.x, the <input> is distributed to paper-input-container, which styles it.
      In 2.x the <iron-input> is distributed to paper-input-container, which styles
      it, but in order for this to work correctly, we need to reset some
      of the native input's properties to inherit (from the iron-input) */
      iron-input > input {
        @apply --paper-input-container-shared-input-style;
        font-family: inherit;
        font-weight: inherit;
        font-size: inherit;
        letter-spacing: inherit;
        word-spacing: inherit;
        line-height: inherit;
        text-shadow: inherit;
        color: inherit;
        cursor: inherit;
      }

      input:disabled {
        @apply --paper-input-container-input-disabled;
      }

      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        @apply --paper-input-container-input-webkit-spinner;
      }

      input::-webkit-clear-button {
        @apply --paper-input-container-input-webkit-clear;
      }

      input::-webkit-calendar-picker-indicator {
        @apply --paper-input-container-input-webkit-calendar-picker-indicator;
      }

      input::-webkit-input-placeholder {
        color: var(--paper-input-container-color, var(--secondary-text-color));
      }

      input:-moz-placeholder {
        color: var(--paper-input-container-color, var(--secondary-text-color));
      }

      input::-moz-placeholder {
        color: var(--paper-input-container-color, var(--secondary-text-color));
      }

      input::-ms-clear {
        @apply --paper-input-container-ms-clear;
      }

      input::-ms-reveal {
        @apply --paper-input-container-ms-reveal;
      }

      input:-ms-input-placeholder {
        color: var(--paper-input-container-color, var(--secondary-text-color));
      }

      label {
        pointer-events: none;
      }
    </style>

    <paper-input-container id="container" no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">

      <slot name="prefix" slot="prefix"></slot>

      <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>

      <span id="template-placeholder"></span>

      <slot name="suffix" slot="suffix"></slot>

      <template is="dom-if" if="[[errorMessage]]">
        <paper-input-error aria-live="assertive" slot="add-on">[[errorMessage]]</paper-input-error>
      </template>

      <template is="dom-if" if="[[charCounter]]">
        <paper-input-char-counter slot="add-on"></paper-input-char-counter>
      </template>

    </paper-input-container>
  </template>

  
  <template id="v0">
    <input is="iron-input" slot="input" class="input-element" id$="[[_inputId]]" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" title$="[[title]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange" tabindex$="[[tabIndex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
  </template>

  <template id="v1">
    
    <iron-input bind-value="{{value}}" slot="input" class="input-element" id$="[[_inputId]]" maxlength$="[[maxlength]]" allowed-pattern="[[allowedPattern]]" invalid="{{invalid}}" validator="[[validator]]">
      <input aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" title$="[[title]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange" tabindex$="[[tabIndex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
    </iron-input>
  </template>

</dom-module>























<dom-module id="iron-overlay-backdrop">

  <template>
    <style>
      :host {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--iron-overlay-backdrop-background-color, #000);
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
        @apply --iron-overlay-backdrop;
      }

      :host(.opened) {
        opacity: var(--iron-overlay-backdrop-opacity, 0.6);
        pointer-events: auto;
        @apply --iron-overlay-backdrop-opened;
      }
    </style>

    <slot></slot>
  </template>

</dom-module>
































<dom-module id="iron-dropdown">
  <template>
    <style>
      :host {
        position: fixed;
      }

      #contentWrapper ::slotted(*) {
        overflow: auto;
      }

      #contentWrapper.animating ::slotted(*) {
        overflow: hidden;
        pointer-events: none;
      }
    </style>

    <div id="contentWrapper">
      <slot id="content" name="dropdown-content"></slot>
    </div>
  </template>

  
</dom-module>





























<dom-module id="paper-menu-button">
  <template>
    <style>
      :host {
        display: inline-block;
        position: relative;
        padding: 8px;
        outline: none;

        @apply --paper-menu-button;
      }

      :host([disabled]) {
        cursor: auto;
        color: var(--disabled-text-color);

        @apply --paper-menu-button-disabled;
      }

      iron-dropdown {
        @apply --paper-menu-button-dropdown;
      }

      .dropdown-content {
        @apply --shadow-elevation-2dp;

        position: relative;
        border-radius: 2px;
        background-color: var(--paper-menu-button-dropdown-background, var(--primary-background-color));

        @apply --paper-menu-button-content;
      }

      :host([vertical-align="top"]) .dropdown-content {
        margin-bottom: 20px;
        margin-top: -10px;
        top: 10px;
      }

      :host([vertical-align="bottom"]) .dropdown-content {
        bottom: 10px;
        margin-bottom: -10px;
        margin-top: 20px;
      }

      #trigger {
        cursor: pointer;
      }
    </style>

    <div id="trigger" on-tap="toggle">
      <slot name="dropdown-trigger"></slot>
    </div>

    <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizontalAlign]]" vertical-align="[[verticalAlign]]" dynamic-align="[[dynamicAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no-overlap="[[noOverlap]]" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]" focus-target="[[_dropdownContent]]" allow-outside-scroll="[[allowOutsideScroll]]" restore-focus-on-close="[[restoreFocusOnClose]]" on-iron-overlay-canceled="__onIronOverlayCanceled">
      <div slot="dropdown-content" class="dropdown-content">
        <slot id="content" name="dropdown-content"></slot>
      </div>
    </iron-dropdown>
  </template>

  
</dom-module>










<iron-iconset-svg name="paper-dropdown-menu" size="24">
<svg><defs>
<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
</defs></svg>
</iron-iconset-svg>



<dom-module id="paper-dropdown-menu-shared-styles">
  <template>
    <style>
      :host {
        display: inline-block;
        position: relative;
        text-align: left;

        /* NOTE(cdata): Both values are needed, since some phones require the
         * value to be `transparent`.
         */
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;

        --paper-input-container-input: {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 100%;
          box-sizing: border-box;
          cursor: pointer;
        };

        @apply --paper-dropdown-menu;
      }

      :host([disabled]) {
        @apply --paper-dropdown-menu-disabled;
      }

      :host([noink]) paper-ripple {
        display: none;
      }

      :host([no-label-float]) paper-ripple {
        top: 8px;
      }

      paper-ripple {
        top: 12px;
        left: 0px;
        bottom: 8px;
        right: 0px;

        @apply --paper-dropdown-menu-ripple;
      }

      paper-menu-button {
        display: block;
        padding: 0;

        @apply --paper-dropdown-menu-button;
      }

      paper-input {
        @apply --paper-dropdown-menu-input;
      }

      iron-icon {
        color: var(--disabled-text-color);

        @apply --paper-dropdown-menu-icon;
      }
    </style>
  </template>
</dom-module>




<dom-module id="paper-dropdown-menu">
  <template>
    <style include="paper-dropdown-menu-shared-styles"></style>

    
    <span role="button"></span>
    <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" dynamic-align="[[dynamicAlign]]" vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat, verticalOffset)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron-select="_onIronSelect" on-iron-deselect="_onIronDeselect" opened="{{opened}}" close-on-activate allow-outside-scroll="[[allowOutsideScroll]]" restore-focus-on-close="[[restoreFocusOnClose]]">
      
      <div class="dropdown-trigger" slot="dropdown-trigger">
        <paper-ripple></paper-ripple>
        
        <paper-input type="text" invalid="[[invalid]]" readonly disabled="[[disabled]]" value="[[value]]" placeholder="[[placeholder]]" error-message="[[errorMessage]]" always-float-label="[[alwaysFloatLabel]]" no-label-float="[[noLabelFloat]]" label="[[label]]">
          
          <iron-icon icon="paper-dropdown-menu:arrow-drop-down" suffix slot="suffix"></iron-icon>
        </paper-input>
      </div>
      <slot id="content" name="dropdown-content" slot="dropdown-content"></slot>
    </paper-menu-button>
  </template>

  
</dom-module>























<dom-module id="paper-listbox">
  <template>
    <style>
      :host {
        display: block;
        padding: 8px 0;

        background: var(--paper-listbox-background-color, var(--primary-background-color));
        color: var(--paper-listbox-color, var(--primary-text-color));

        @apply --paper-listbox;
      }
    </style>

    <slot></slot>
  </template>

  
</dom-module>

















<dom-module id="paper-item-shared-styles">
  <template>
    <style>
      :host, .paper-item {
        display: block;
        position: relative;
        min-height: var(--paper-item-min-height, 48px);
        padding: 0px 16px;
      }

      .paper-item {
        @apply --paper-font-subhead;
        border:none;
        outline: none;
        background: white;
        width: 100%;
        text-align: left;
      }

      :host([hidden]), .paper-item[hidden] {
        display: none !important;
      }

      :host(.iron-selected), .paper-item.iron-selected {
        font-weight: var(--paper-item-selected-weight, bold);

        @apply --paper-item-selected;
      }

      :host([disabled]), .paper-item[disabled] {
        color: var(--paper-item-disabled-color, var(--disabled-text-color));

        @apply --paper-item-disabled;
      }

      :host(:focus), .paper-item:focus {
        position: relative;
        outline: 0;

        @apply --paper-item-focused;
      }

      :host(:focus):before, .paper-item:focus:before {
        @apply --layout-fit;

        background: currentColor;
        content: '';
        opacity: var(--dark-divider-opacity);
        pointer-events: none;

        @apply --paper-item-focused-before;
      }
    </style>
  </template>
</dom-module>




<dom-module id="paper-item">
  <template>
    <style include="paper-item-shared-styles">
      :host {
        @apply --layout-horizontal;
        @apply --layout-center;
        @apply --paper-font-subhead;

        @apply --paper-item;
      }
    </style>
    <slot></slot>
  </template>

  
</dom-module>


















<dom-module id="tf-backend">
  
</dom-module>

















<dom-module id="tf-storage">
  
</dom-module>



<dom-module id="tf-tag-filterer">
  <template>
    <paper-input no-label-float label="Filter tags (regular expressions supported)" value="{{_tagFilter}}" class="search-input">
      <iron-icon prefix icon="search" slot="prefix"></iron-icon>
    </paper-input>
    <style>
      :host {
        display: block;
        margin: 10px 5px 10px 10px;
      }
    </style>
  </template>
  
</dom-module>






<dom-module id="iron-flex">
  <template>
    <style>
      .layout.horizontal,
      .layout.vertical {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      }

      .layout.inline {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
      }

      .layout.horizontal {
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
      }

      .layout.vertical {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
      }

      .layout.wrap {
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
      }

      .layout.no-wrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }

      .layout.center,
      .layout.center-center {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .layout.center-justified,
      .layout.center-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
      }

      .flex {
        -ms-flex: 1 1 0.000000001px;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-basis: 0.000000001px;
        flex-basis: 0.000000001px;
      }

      .flex-auto {
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
      }

      .flex-none {
        -ms-flex: none;
        -webkit-flex: none;
        flex: none;
      }
    </style>
  </template>
</dom-module>


<dom-module id="iron-flex-reverse">
  <template>
    <style>
      .layout.horizontal-reverse,
      .layout.vertical-reverse {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      }

      .layout.horizontal-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
      }

      .layout.vertical-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
      }

      .layout.wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
      }
    </style>
  </template>
</dom-module>


<dom-module id="iron-flex-alignment">
  <template>
    <style>
      /**
       * Alignment in cross axis.
       */
      .layout.start {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
      }

      .layout.center,
      .layout.center-center {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .layout.end {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
      }

      .layout.baseline {
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
      }

      /**
       * Alignment in main axis.
       */
      .layout.start-justified {
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
      }

      .layout.center-justified,
      .layout.center-center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
      }

      .layout.end-justified {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
      }

      .layout.around-justified {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
      }

      .layout.justified {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
      }

      /**
       * Self alignment.
       */
      .self-start {
        -ms-align-self: flex-start;
        -webkit-align-self: flex-start;
        align-self: flex-start;
      }

      .self-center {
        -ms-align-self: center;
        -webkit-align-self: center;
        align-self: center;
      }

      .self-end {
        -ms-align-self: flex-end;
        -webkit-align-self: flex-end;
        align-self: flex-end;
      }

      .self-stretch {
        -ms-align-self: stretch;
        -webkit-align-self: stretch;
        align-self: stretch;
      }

      .self-baseline {
        -ms-align-self: baseline;
        -webkit-align-self: baseline;
        align-self: baseline;
      }

      /**
       * multi-line alignment in main axis.
       */
      .layout.start-aligned {
        -ms-flex-line-pack: start;  /* IE10 */
        -ms-align-content: flex-start;
        -webkit-align-content: flex-start;
        align-content: flex-start;
      }

      .layout.end-aligned {
        -ms-flex-line-pack: end;  /* IE10 */
        -ms-align-content: flex-end;
        -webkit-align-content: flex-end;
        align-content: flex-end;
      }

      .layout.center-aligned {
        -ms-flex-line-pack: center;  /* IE10 */
        -ms-align-content: center;
        -webkit-align-content: center;
        align-content: center;
      }

      .layout.between-aligned {
        -ms-flex-line-pack: justify;  /* IE10 */
        -ms-align-content: space-between;
        -webkit-align-content: space-between;
        align-content: space-between;
      }

      .layout.around-aligned {
        -ms-flex-line-pack: distribute;  /* IE10 */
        -ms-align-content: space-around;
        -webkit-align-content: space-around;
        align-content: space-around;
      }
    </style>
  </template>
</dom-module>

<dom-module id="iron-flex-factors">
  <template>
    <style>
      .flex,
      .flex-1 {
        -ms-flex: 1 1 0.000000001px;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-basis: 0.000000001px;
        flex-basis: 0.000000001px;
      }

      .flex-2 {
        -ms-flex: 2;
        -webkit-flex: 2;
        flex: 2;
      }

      .flex-3 {
        -ms-flex: 3;
        -webkit-flex: 3;
        flex: 3;
      }

      .flex-4 {
        -ms-flex: 4;
        -webkit-flex: 4;
        flex: 4;
      }

      .flex-5 {
        -ms-flex: 5;
        -webkit-flex: 5;
        flex: 5;
      }

      .flex-6 {
        -ms-flex: 6;
        -webkit-flex: 6;
        flex: 6;
      }

      .flex-7 {
        -ms-flex: 7;
        -webkit-flex: 7;
        flex: 7;
      }

      .flex-8 {
        -ms-flex: 8;
        -webkit-flex: 8;
        flex: 8;
      }

      .flex-9 {
        -ms-flex: 9;
        -webkit-flex: 9;
        flex: 9;
      }

      .flex-10 {
        -ms-flex: 10;
        -webkit-flex: 10;
        flex: 10;
      }

      .flex-11 {
        -ms-flex: 11;
        -webkit-flex: 11;
        flex: 11;
      }

      .flex-12 {
        -ms-flex: 12;
        -webkit-flex: 12;
        flex: 12;
      }
    </style>
  </template>
</dom-module>


<dom-module id="iron-positioning">
  <template>
    <style>
      .block {
        display: block;
      }

      [hidden] {
        display: none !important;
      }

      .invisible {
        visibility: hidden !important;
      }

      .relative {
        position: relative;
      }

      .fit {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      body.fullbleed {
        margin: 0;
        height: 100vh;
      }

      .scroll {
        -webkit-overflow-scrolling: touch;
        overflow: auto;
      }

      /* fixed position */
      .fixed-bottom,
      .fixed-left,
      .fixed-right,
      .fixed-top {
        position: fixed;
      }

      .fixed-top {
        top: 0;
        left: 0;
        right: 0;
      }

      .fixed-right {
        top: 0;
        right: 0;
        bottom: 0;
      }

      .fixed-bottom {
        right: 0;
        bottom: 0;
        left: 0;
      }

      .fixed-left {
        top: 0;
        bottom: 0;
        left: 0;
      }
    </style>
  </template>
</dom-module>









<style is="custom-style">
  :root {
    --tb-orange-weak: #ffa726;
    --tb-orange-strong: #f57c00;
    --tb-orange-dark: #dc7320;
    --tb-grey-darker: #e2e2e2;
    --tb-grey-lighter: #f3f3f3;
    --tb-ui-dark-accent: #757575;
    --tb-ui-light-accent: #e0e0e0;
    --tb-graph-faded: #e0d4b3;
  }
</style>


<dom-module id="dashboard-style">
  <template>
    <style include="iron-flex"></style>
    <style>
      :host {
        --sidebar-vertical-padding: 15px;
        --sidebar-left-padding: 30px;
      }

      [slot='sidebar'] {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-right: 20px;
        overflow-x: hidden;
        padding: 5px 0;
        text-overflow: ellipsis;
      }

      tf-runs-selector {
        flex-grow: 1;
        flex-shrink: 1;
        left: var(--sidebar-left-padding);
        max-height: calc(100% - var(--sidebar-vertical-padding) * 2);
        overflow: hidden;
        position: absolute;
        right: 0;
      }

      .search-input {
        margin: 10px 5px 0 10px;
      }

      .sidebar-section {
        border-top: solid 1px rgba(0, 0, 0, 0.12);
        padding: var(--sidebar-vertical-padding) 0
          var(--sidebar-vertical-padding) var(--sidebar-left-padding);
        position: relative;
      }

      .sidebar-section:first-of-type {
        border: none;
      }

      .sidebar-section:last-of-type {
        flex-grow: 1;
        display: flex;
      }

      .sidebar-section paper-button {
        margin: 5px;
      }

      .sidebar-section paper-button:first-of-type {
        margin-left: 0 !important;
      }

      .sidebar-section paper-button:last-of-type {
        margin-right: 0 !important;
      }

      .sidebar-section > :first-child {
        margin-top: 0;
        padding-top: 0;
      }

      .sidebar-section > :last-child {
        margin-bottom: 0;
        padding-bottom: 0;
      }

      .sidebar-section h3 {
        color: var(--paper-grey-800);
        display: block;
        font-size: 14px;
        font-weight: normal;
        margin: 10px 0 5px;
        pointer-events: none;
      }

      paper-checkbox {
        --paper-checkbox-checked-color: var(--tb-ui-dark-accent);
        --paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
        font-size: 15px;
        margin-top: 5px;
      }
    </style>
  </template>
</dom-module>





<dom-module id="scrollbar-style">
  <template>
    <style>
      .scrollbar::-webkit-scrollbar-track {
        visibility: hidden;
      }

      .scrollbar::-webkit-scrollbar {
        width: 10px;
      }

      .scrollbar::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
        background-color: var(--paper-grey-500);
        color: var(--paper-grey-900);
      }
      .scrollbar {
        box-sizing: border-box;
      }
    </style>
  </template>
</dom-module>




<dom-module id="tf-dashboard-layout">
  <template>
    <div id="sidebar">
      <slot name="sidebar"></slot>
    </div>

    <div id="center">
      <slot name="center" class="scollbar"></slot>
    </div>
    <style include="scrollbar-style"></style>
    <style>
      :host {
        display: flex;
        flex-direction: row;
        height: 100%;
      }

      #sidebar {
        flex: 0 0 var(--tf-dashboard-layout-sidebar-basis, 25%);
        height: 100%;
        max-width: var(--tf-dashboard-layout-sidebar-max-width, 350px);
        min-width: var(--tf-dashboard-layout-sidebar-min-width, 270px);
        overflow-y: auto;
        text-overflow: ellipsis;
      }

      #center {
        flex-grow: 1;
        flex-shrink: 1;
        height: 100%;
        overflow: hidden;
      }

      ::slotted([slot='center']) {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        will-change: transform;
      }

      .tf-graph-dashboard #center {
        background: #fff;
      }
    </style>
  </template>
  
</dom-module>





<dom-module id="tf-option-selector">
  <template>
    <div id="wrap">
      <h3>[[name]]</h3>
      <div class="content-wrapper"><slot></slot></div>
    </div>
    <style>
      .content-wrapper ::slotted(*) {
        background: none;
        color: var(--tb-ui-dark-accent);
        font-size: 13px;
        margin-top: 10px;
      }

      .content-wrapper ::slotted(*) {
        background: none;
        color: var(--tb-ui-dark-accent);
        font-size: 13px;
        margin-top: 10px;
      }

      .content-wrapper ::slotted(.selected) {
        background-color: var(--tb-ui-dark-accent);
        color: white !important;
      }

      h3 {
        color: var(--paper-grey-800);
        display: block;
        font-size: 14px;
        font-weight: normal;
        margin: 0 0 5px;
        pointer-events: none;
      }
    </style>
  </template>
  
</dom-module>









<dom-module id="iron-collapse">

  <template>

    <style>
      :host {
        display: block;
        transition-duration: var(--iron-collapse-transition-duration, 300ms);
        /* Safari 10 needs this property prefixed to correctly apply the custom property */
        -webkit-transition-duration: var(--iron-collapse-transition-duration, 300ms);
        overflow: visible;
      }

      :host(.iron-collapse-closed) {
        display: none;
      }

      :host(:not(.iron-collapse-opened)) {
        overflow: hidden;
      }
    </style>

    <slot></slot>

  </template>

</dom-module>

















<dom-module id="tf-category-paginated-view">
  <template>
    <template is="dom-if" if="[[_paneRendered]]" id="ifRendered">
      <button class="heading" on-tap="_togglePane" open-button$="[[opened]]">
        <span class="name">
          <template is="dom-if" if="[[_isSearchResults]]">
            <template is="dom-if" if="[[_isCompositeSearch(category)]]">
              <span>Tags matching multiple experiments</span>
              <template is="dom-if" if="[[_isInvalidSearchResults]]">
                <span>&nbsp;<strong>(malformed regular expression)</strong></span>
              </template>
            </template>
            <template is="dom-if" if="[[!_isCompositeSearch(category)]]">
              <span class="light">Tags matching /</span>
              <span class="category-name" title$="[[category.name]]">[[category.name]]</span>
              <span class="light">/</span>
              <template is="dom-if" if="[[_isUniversalSearchQuery]]">
                <span> (all tags)</span>
              </template>
              <template is="dom-if" if="[[_isInvalidSearchResults]]">
                <span> <strong>(malformed regular expression)</strong></span>
              </template>
            </template>
          </template>
          <template is="dom-if" if="[[!_isSearchResults]]">
            <span class="category-name" title$="[[category.name]]">[[category.name]]</span>
          </template>
        </span>
        <span class="count">
          <template is="dom-if" if="[[_hasMultiple]]">
            <span>[[_count]]</span>
          </template>
          <iron-icon icon="expand-more" class="expand-arrow"></iron-icon>
        </span>
      </button>
      
      <iron-collapse opened="[[opened]]" no-animation>
        <div class="content">
          <span id="top-of-container"></span>
          <template is="dom-if" if="[[_multiplePagesExist]]">
            <div class="big-page-buttons" style="margin-bottom: 10px;">
              <paper-button on-tap="_performPreviousPage" disabled$="[[!_hasPreviousPage]]">Previous page</paper-button>
              <paper-button on-tap="_performNextPage" disabled$="[[!_hasNextPage]]">Next page</paper-button>
            </div>
          </template>

          <div id="items">
            <slot name="items"></slot>
          </div>
          <template is="dom-if" if="[[_multiplePagesExist]]">
            <div id="controls-container">
              <div style="display: inline-block; padding: 0 5px">
                Page
                <paper-input id="page-input" type="number" no-label-float min="1" max="[[_pageCount]]" value="[[_pageInputValue]]" on-input="_handlePageInputEvent" on-change="_handlePageChangeEvent" on-focus="_handlePageFocusEvent" on-blur="_handlePageBlurEvent"></paper-input>
                of [[_pageCount]]
              </div>
            </div>

            <div class="big-page-buttons" style="margin-top: 10px;">
              <paper-button on-tap="_performPreviousPage" disabled$="[[!_hasPreviousPage]]">Previous page</paper-button>
              <paper-button on-tap="_performNextPage" disabled$="[[!_hasNextPage]]">Next page</paper-button>
            </div>
          </template>
        </div>
      </iron-collapse>
    </template>
    <style>
      :host {
        display: block;
        margin: 0 5px 1px 10px;
      }

      :host(:first-of-type) {
        margin-top: 10px;
      }

      :host(:last-of-type) {
        margin-bottom: 20px;
      }

      .heading {
        background-color: white;
        border: none;
        cursor: pointer;
        width: 100%;
        font-size: 15px;
        line-height: 1;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .heading::-moz-focus-inner {
        padding: 10px 15px;
      }

      [open-button] {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }

      [open-button] .expand-arrow {
        transform: rotateZ(180deg);
      }

      .name {
        display: inline-flex;
        overflow: hidden;
      }

      .light {
        color: var(--paper-grey-500);
      }

      .category-name {
        white-space: pre;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px 0;
      }

      .count {
        margin: 0 5px;
        font-size: 12px;
        color: var(--paper-grey-500);
        display: flex;
        align-items: center;
        flex: none;
      }

      .heading::-moz-focus-inner {
        padding: 10px 15px;
      }

      .content {
        display: flex;
        flex-direction: column;
        background: white;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        border-top: none;
        border: 1px solid #dedede;
        padding: 15px;
      }

      .light {
        color: var(--paper-grey-500);
      }

      #controls-container {
        justify-content: center;
        display: flex;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
      }

      #controls-container paper-button {
        display: inline-block;
      }

      .big-page-buttons {
        display: flex;
      }

      .big-page-buttons paper-button {
        background-color: var(--tb-ui-light-accent);
        color: var(--tb-ui-dark-accent);
        display: inline-block;
        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 13px;
      }

      .big-page-buttons paper-button[disabled] {
        background: none;
      }

      slot {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

      #page-input {
        display: inline-block;
        width: var(--tf-category-paginated-view-page-input-width, 100%);
      }
    </style>
  </template>
  
</dom-module>

















<dom-module id="paper-dialog-shared-styles">
  <template>
    <style>
      :host {
        display: block;
        margin: 24px 40px;

        background: var(--paper-dialog-background-color, var(--primary-background-color));
        color: var(--paper-dialog-color, var(--primary-text-color));

        @apply --paper-font-body1;
        @apply --shadow-elevation-16dp;
        @apply --paper-dialog;
      }

      :host > ::slotted(*) {
        margin-top: 20px;
        padding: 0 24px;
      }

      :host > ::slotted(.no-padding) {
        padding: 0;
      }

      
      :host > ::slotted(*:first-child) {
        margin-top: 24px;
      }

      :host > ::slotted(*:last-child) {
        margin-bottom: 24px;
      }

      /* In 1.x, this selector was `:host > ::content h2`. In 2.x <slot> allows
      to select direct children only, which increases the weight of this
      selector, so we have to re-define first-child/last-child margins below. */
      :host > ::slotted(h2) {
        position: relative;
        margin: 0;

        @apply --paper-font-title;
        @apply --paper-dialog-title;
      }

      /* Apply mixin again, in case it sets margin-top. */
      :host > ::slotted(h2:first-child) {
        margin-top: 24px;
        @apply --paper-dialog-title;
      }

      /* Apply mixin again, in case it sets margin-bottom. */
      :host > ::slotted(h2:last-child) {
        margin-bottom: 24px;
        @apply --paper-dialog-title;
      }

      :host > ::slotted(.paper-dialog-buttons),
      :host > ::slotted(.buttons) {
        position: relative;
        padding: 8px 8px 8px 24px;
        margin: 0;

        color: var(--paper-dialog-button-color, var(--primary-color));

        @apply --layout-horizontal;
        @apply --layout-end-justified;
      }
    </style>
  </template>
</dom-module>



<dom-module id="paper-dialog">
  <template>
    <style include="paper-dialog-shared-styles"></style>
    <slot></slot>
  </template>
</dom-module>











<dom-module id="tf-color-scale">
  
  
</dom-module>




<iron-iconset-svg name="icons" size="24">
<svg><defs>
<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z" /></g>
<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z" /></g>
<g id="accessible"><circle cx="12" cy="4" r="2" /><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z" /></g>
<g id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z" /></g>
<g id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /></g>
<g id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" /></g>
<g id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" /></g>
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /></g>
<g id="add-alert"><path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z" /></g>
<g id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /></g>
<g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /></g>
<g id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></g>
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z" /></g>
<g id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z" /></g>
<g id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z" /></g>
<g id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z" /></g>
<g id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z" /></g>
<g id="all-out"><path d="M16.21 4.16l4 4v-4zm4 12l-4 4h4zm-12 4l-4-4v4zm-4-12l4-4h-4zm12.95-.95c-2.73-2.73-7.17-2.73-9.9 0s-2.73 7.17 0 9.9 7.17 2.73 9.9 0 2.73-7.16 0-9.9zm-1.1 8.8c-2.13 2.13-5.57 2.13-7.7 0s-2.13-5.57 0-7.7 5.57-2.13 7.7 0 2.13 5.57 0 7.7z" /></g>
<g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z" /></g>
<g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z" /></g>
<g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" /></g>
<g id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z" /></g>
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
<g id="arrow-downward"><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" /></g>
<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z" /></g>
<g id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z" /></g>
<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z" /></g>
<g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" /></g>
<g id="arrow-upward"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" /></g>
<g id="aspect-ratio"><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /></g>
<g id="assessment"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" /></g>
<g id="assignment"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" /></g>
<g id="assignment-ind"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z" /></g>
<g id="assignment-late"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-6 15h-2v-2h2v2zm0-4h-2V8h2v6zm-1-9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" /></g>
<g id="assignment-return"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm4 12h-4v3l-5-5 5-5v3h4v4z" /></g>
<g id="assignment-returned"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 15l-5-5h3V9h4v4h3l-5 5z" /></g>
<g id="assignment-turned-in"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" /></g>
<g id="attachment"><path d="M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z" /></g>
<g id="autorenew"><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z" /></g>
<g id="backspace"><path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z" /></g>
<g id="backup"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" /></g>
<g id="block"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" /></g>
<g id="book"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z" /></g>
<g id="bookmark"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z" /></g>
<g id="bookmark-border"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z" /></g>
<g id="bug-report"><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z" /></g>
<g id="build"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" /></g>
<g id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z" /></g>
<g id="camera-enhance"><path d="M9 3L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-1l1.25-2.75L16 13l-2.75-1.25L12 9l-1.25 2.75L8 13l2.75 1.25z" /></g>
<g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" /></g>
<g id="card-giftcard"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z" /></g>
<g id="card-membership"><path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z" /></g>
<g id="card-travel"><path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v6z" /></g>
<g id="change-history"><path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z" /></g>
<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
<g id="check-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" /></g>
<g id="check-box-outline-blank"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></g>
<g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" /></g>
<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /></g>
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /></g>
<g id="chrome-reader-mode"><path d="M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z" /></g>
<g id="class"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z" /></g>
<g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
<g id="cloud"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" /></g>
<g id="cloud-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.5 14H8c-1.66 0-3-1.34-3-3s1.34-3 3-3l.14.01C8.58 8.28 10.13 7 12 7c2.21 0 4 1.79 4 4h.5c1.38 0 2.5 1.12 2.5 2.5S17.88 16 16.5 16z" /></g>
<g id="cloud-done"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z" /></g>
<g id="cloud-download"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" /></g>
<g id="cloud-off"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z" /></g>
<g id="cloud-queue"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z" /></g>
<g id="cloud-upload"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" /></g>
<g id="code"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" /></g>
<g id="compare-arrows"><path d="M9.01 14H2v2h7.01v3L13 15l-3.99-4v3zm5.98-1v-3H22V8h-7.01V5L11 9l3.99 4z" /></g>
<g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" /></g>
<g id="content-cut"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" /></g>
<g id="content-paste"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" /></g>
<g id="copyright"><path d="M10.08 10.86c.05-.33.16-.62.3-.87s.34-.46.59-.62c.24-.15.54-.22.91-.23.23.01.44.05.63.13.2.09.38.21.52.36s.25.33.34.53.13.42.14.64h1.79c-.02-.47-.11-.9-.28-1.29s-.4-.73-.7-1.01-.66-.5-1.08-.66-.88-.23-1.39-.23c-.65 0-1.22.11-1.7.34s-.88.53-1.2.92-.56.84-.71 1.36S8 11.29 8 11.87v.27c0 .58.08 1.12.23 1.64s.39.97.71 1.35.72.69 1.2.91 1.05.34 1.7.34c.47 0 .91-.08 1.32-.23s.77-.36 1.08-.63.56-.58.74-.94.29-.74.3-1.15h-1.79c-.01.21-.06.4-.15.58s-.21.33-.36.46-.32.23-.52.3c-.19.07-.39.09-.6.1-.36-.01-.66-.08-.89-.23-.25-.16-.45-.37-.59-.62s-.25-.55-.3-.88-.08-.67-.08-1v-.27c0-.35.03-.68.08-1.01zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></g>
<g id="create"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /></g>
<g id="create-new-folder"><path d="M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z" /></g>
<g id="credit-card"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" /></g>
<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" /></g>
<g id="date-range"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" /></g>
<g id="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /></g>
<g id="delete-forever"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z" /></g>
<g id="delete-sweep"><path d="M15 16h4v2h-4zm0-8h7v2h-7zm0 4h6v2h-6zM3 18c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V8H3v10zM14 5h-3l-1-1H6L5 5H2v2h12z" /></g>
<g id="description"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" /></g>
<g id="dns"><path d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" /></g>
<g id="done"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /></g>
<g id="done-all"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" /></g>
<g id="donut-large"><path d="M11 5.08V2c-5 .5-9 4.81-9 10s4 9.5 9 10v-3.08c-3-.48-6-3.4-6-6.92s3-6.44 6-6.92zM18.97 11H22c-.47-5-4-8.53-9-9v3.08C16 5.51 18.54 8 18.97 11zM13 18.92V22c5-.47 8.53-4 9-9h-3.03c-.43 3-2.97 5.49-5.97 5.92z" /></g>
<g id="donut-small"><path d="M11 9.16V2c-5 .5-9 4.79-9 10s4 9.5 9 10v-7.16c-1-.41-2-1.52-2-2.84s1-2.43 2-2.84zM14.86 11H22c-.48-4.75-4-8.53-9-9v7.16c1 .3 1.52.98 1.86 1.84zM13 14.84V22c5-.47 8.52-4.25 9-9h-7.14c-.34.86-.86 1.54-1.86 1.84z" /></g>
<g id="drafts"><path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z" /></g>
<g id="eject"><path d="M5 17h14v2H5zm7-12L5.33 15h13.34z" /></g>
<g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" /></g>
<g id="error-outline"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /></g>
<g id="euro-symbol"><path d="M15 18.5c-2.51 0-4.68-1.42-5.76-3.5H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24C10.32 6.92 12.5 5.5 15 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3C19.41 3.87 17.3 3 15 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06c-.04.33-.06.66-.06 1 0 .34.02.67.06 1H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></g>
<g id="event"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" /></g>
<g id="event-seat"><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v3h-3zM2 10h3v3H2zm15 3H7V5c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v8z" /></g>
<g id="exit-to-app"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></g>
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
<g id="explore"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z" /></g>
<g id="extension"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z" /></g>
<g id="face"><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z" /></g>
<g id="favorite"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></g>
<g id="favorite-border"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /></g>
<g id="feedback"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z" /></g>
<g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" /></g>
<g id="file-upload"><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" /></g>
<g id="filter-list"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" /></g>
<g id="find-in-page"><path d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z" /></g>
<g id="find-replace"><path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z" /></g>
<g id="fingerprint"><path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z" /></g>
<g id="first-page"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" /></g>
<g id="flag"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" /></g>
<g id="flight-land"><path d="M2.5 19h19v2h-19zm7.18-5.73l4.35 1.16 5.31 1.42c.8.21 1.62-.26 1.84-1.06.21-.8-.26-1.62-1.06-1.84l-5.31-1.42-2.76-9.02L10.12 2v8.28L5.15 8.95l-.93-2.32-1.45-.39v5.17l1.6.43 5.31 1.43z" /></g>
<g id="flight-takeoff"><path d="M2.5 19h19v2h-19zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10l-6.9-6.43-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 1.82 3.16.77 1.33 1.6-.43 5.31-1.42 4.35-1.16L21 11.49c.81-.23 1.28-1.05 1.07-1.85z" /></g>
<g id="flip-to-back"><path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8c-1.11 0-2 .9-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2c0-1.1-.9-2-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.89 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zM5 7H3v12c0 1.1.89 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z" /></g>
<g id="flip-to-front"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" /></g>
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" /></g>
<g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" /></g>
<g id="folder-shared"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 3c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm4 8h-8v-1c0-1.33 2.67-2 4-2s4 .67 4 2v1z" /></g>
<g id="font-download"><path d="M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" /></g>
<g id="forward"><path d="M12 8V4l8 8-8 8v-4H4V8z" /></g>
<g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /></g>
<g id="fullscreen-exit"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" /></g>
<g id="g-translate"><path d="M20 5h-9.12L10 2H4c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h7l1 3h8c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zM7.17 14.59c-2.25 0-4.09-1.83-4.09-4.09s1.83-4.09 4.09-4.09c1.04 0 1.99.37 2.74 1.07l.07.06-1.23 1.18-.06-.05c-.29-.27-.78-.59-1.52-.59-1.31 0-2.38 1.09-2.38 2.42s1.07 2.42 2.38 2.42c1.37 0 1.96-.87 2.12-1.46H7.08V9.91h3.95l.01.07c.04.21.05.4.05.61 0 2.35-1.61 4-3.92 4zm6.03-1.71c.33.6.74 1.18 1.19 1.7l-.54.53-.65-2.23zm.77-.76h-.99l-.31-1.04h3.99s-.34 1.31-1.56 2.74c-.52-.62-.89-1.23-1.13-1.7zM21 20c0 .55-.45 1-1 1h-7l2-2-.81-2.77.92-.92L17.79 18l.73-.73-2.71-2.68c.9-1.03 1.6-2.25 1.92-3.51H19v-1.04h-3.64V9h-1.04v1.04h-1.96L11.18 6H20c.55 0 1 .45 1 1v13z" /></g>
<g id="gavel"><path d="M1 21h12v2H1zM5.245 8.07l2.83-2.827 14.14 14.142-2.828 2.828zM12.317 1l5.657 5.656-2.83 2.83-5.654-5.66zM3.825 9.485l5.657 5.657-2.828 2.828-5.657-5.657z" /></g>
<g id="gesture"><path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z" /></g>
<g id="get-app"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" /></g>
<g id="gif"><path d="M11.5 9H13v6h-1.5zM9 9H6c-.6 0-1 .5-1 1v4c0 .5.4 1 1 1h3c.6 0 1-.5 1-1v-2H8.5v1.5h-2v-3H10V10c0-.5-.4-1-1-1zm10 1.5V9h-4.5v6H16v-2h2v-1.5h-2v-1z" /></g>
<g id="grade"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></g>
<g id="group-work"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM9.5 8c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8zm6.5 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /></g>
<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></g>
<g id="help-outline"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" /></g>
<g id="highlight-off"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></g>
<g id="history"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" /></g>
<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></g>
<g id="hourglass-empty"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z" /></g>
<g id="hourglass-full"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z" /></g>
<g id="http"><path d="M4.5 11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5v2zm2.5-.5h1.5V15H10v-4.5h1.5V9H7v1.5zm5.5 0H14V15h1.5v-4.5H17V9h-4.5v1.5zm9-1.5H18v6h1.5v-2h2c.8 0 1.5-.7 1.5-1.5v-1c0-.8-.7-1.5-1.5-1.5zm0 2.5h-2v-1h2v1z" /></g>
<g id="https"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /></g>
<g id="important-devices"><path d="M23 11.01L18 11c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-9c0-.55-.45-.99-1-.99zM23 20h-5v-7h5v7zM20 2H2C.89 2 0 2.89 0 4v12c0 1.1.89 2 2 2h7v2H7v2h8v-2h-2v-2h2v-2H2V4h18v5h2V4c0-1.11-.9-2-2-2zm-8.03 7L11 6l-.97 3H7l2.47 1.76-.94 2.91 2.47-1.8 2.47 1.8-.94-2.91L15 9h-3.03z" /></g>
<g id="inbox"><path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z" /></g>
<g id="indeterminate-check-box"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" /></g>
<g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
<g id="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" /></g>
<g id="input"><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z" /></g>
<g id="invert-colors"><path d="M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z" /></g>
<g id="label"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z" /></g>
<g id="label-outline"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16zM16 17H5V7h11l3.55 5L16 17z" /></g>
<g id="language"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" /></g>
<g id="last-page"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" /></g>
<g id="launch"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" /></g>
<g id="lightbulb-outline"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" /></g>
<g id="line-style"><path d="M3 16h5v-2H3v2zm6.5 0h5v-2h-5v2zm6.5 0h5v-2h-5v2zM3 20h2v-2H3v2zm4 0h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zM3 12h8v-2H3v2zm10 0h8v-2h-8v2zM3 4v4h18V4H3z" /></g>
<g id="line-weight"><path d="M3 17h18v-2H3v2zm0 3h18v-1H3v1zm0-7h18v-3H3v3zm0-9v4h18V4H3z" /></g>
<g id="link"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" /></g>
<g id="list"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" /></g>
<g id="lock"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /></g>
<g id="lock-open"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z" /></g>
<g id="lock-outline"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8.9 6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2H8.9V6zM18 20H6V10h12v10z" /></g>
<g id="low-priority"><path d="M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z" /></g>
<g id="loyalty"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7zm11.77 8.27L13 19.54l-4.27-4.27C8.28 14.81 8 14.19 8 13.5c0-1.38 1.12-2.5 2.5-2.5.69 0 1.32.28 1.77.74l.73.72.73-.73c.45-.45 1.08-.73 1.77-.73 1.38 0 2.5 1.12 2.5 2.5 0 .69-.28 1.32-.73 1.77z" /></g>
<g id="mail"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" /></g>
<g id="markunread"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" /></g>
<g id="markunread-mailbox"><path d="M20 6H10v6H8V4h6V0H6v6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z" /></g>
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></g>
<g id="more-horiz"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
<g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
<g id="motorcycle"><path d="M19.44 9.03L15.41 5H11v2h3.59l2 2H5c-2.8 0-5 2.2-5 5s2.2 5 5 5c2.46 0 4.45-1.69 4.9-4h1.65l2.77-2.77c-.21.54-.32 1.14-.32 1.77 0 2.8 2.2 5 5 5s5-2.2 5-5c0-2.65-1.97-4.77-4.56-4.97zM7.82 15C7.4 16.15 6.28 17 5 17c-1.63 0-3-1.37-3-3s1.37-3 3-3c1.28 0 2.4.85 2.82 2H5v2h2.82zM19 17c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" /></g>
<g id="move-to-inbox"><path d="M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z" /></g>
<g id="next-week"><path d="M20 7h-4V5c0-.55-.22-1.05-.59-1.41C15.05 3.22 14.55 3 14 3h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 5h4v2h-4V5zm1 13.5l-1-1 3-3-3-3 1-1 4 4-4 4z" /></g>
<g id="note-add"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z" /></g>
<g id="offline-pin"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 16H7v-2h10v2zm-6.7-4L7 10.7l1.4-1.4 1.9 1.9 5.3-5.3L17 7.3 10.3 14z" /></g>
<g id="opacity"><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z" /></g>
<g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z" /></g>
<g id="open-in-new"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" /></g>
<g id="open-with"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z" /></g>
<g id="pageview"><path d="M11.5 9C10.12 9 9 10.12 9 11.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5S12.88 9 11.5 9zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-3.21 14.21l-2.91-2.91c-.69.44-1.51.7-2.39.7C9.01 16 7 13.99 7 11.5S9.01 7 11.5 7 16 9.01 16 11.5c0 .88-.26 1.69-.7 2.39l2.91 2.9-1.42 1.42z" /></g>
<g id="pan-tool"><path d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z" /></g>
<g id="payment"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" /></g>
<g id="perm-camera-mic"><path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v-2.09c-2.83-.48-5-2.94-5-5.91h2c0 2.21 1.79 4 4 4s4-1.79 4-4h2c0 2.97-2.17 5.43-5 5.91V21h7c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-6 8c0 1.1-.9 2-2 2s-2-.9-2-2V9c0-1.1.9-2 2-2s2 .9 2 2v4z" /></g>
<g id="perm-contact-calendar"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1z" /></g>
<g id="perm-data-setting"><path d="M18.99 11.5c.34 0 .67.03 1 .07L20 0 0 20h11.56c-.04-.33-.07-.66-.07-1 0-4.14 3.36-7.5 7.5-7.5zm3.71 7.99c.02-.16.04-.32.04-.49 0-.17-.01-.33-.04-.49l1.06-.83c.09-.08.12-.21.06-.32l-1-1.73c-.06-.11-.19-.15-.31-.11l-1.24.5c-.26-.2-.54-.37-.85-.49l-.19-1.32c-.01-.12-.12-.21-.24-.21h-2c-.12 0-.23.09-.25.21l-.19 1.32c-.3.13-.59.29-.85.49l-1.24-.5c-.11-.04-.24 0-.31.11l-1 1.73c-.06.11-.04.24.06.32l1.06.83c-.02.16-.03.32-.03.49 0 .17.01.33.03.49l-1.06.83c-.09.08-.12.21-.06.32l1 1.73c.06.11.19.15.31.11l1.24-.5c.26.2.54.37.85.49l.19 1.32c.02.12.12.21.25.21h2c.12 0 .23-.09.25-.21l.19-1.32c.3-.13.59-.29.84-.49l1.25.5c.11.04.24 0 .31-.11l1-1.73c.06-.11.03-.24-.06-.32l-1.07-.83zm-3.71 1.01c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /></g>
<g id="perm-device-information"><path d="M13 7h-2v2h2V7zm0 4h-2v6h2v-6zm4-9.99L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z" /></g>
<g id="perm-identity"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /></g>
<g id="perm-media"><path d="M2 6H0v5h.01L0 20c0 1.1.9 2 2 2h18v-2H2V6zm20-2h-8l-2-2H6c-1.1 0-1.99.9-1.99 2L4 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 15l4.5-6 3.5 4.51 2.5-3.01L21 15H7z" /></g>
<g id="perm-phone-msg"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM12 3v10l3-3h6V3h-9z" /></g>
<g id="perm-scan-wifi"><path d="M12 3C6.95 3 3.15 4.85 0 7.23L12 22 24 7.25C20.85 4.87 17.05 3 12 3zm1 13h-2v-6h2v6zm-2-8V6h2v2h-2z" /></g>
<g id="pets"><circle cx="4.5" cy="9.5" r="2.5" /><circle cx="9" cy="5.5" r="2.5" /><circle cx="15" cy="5.5" r="2.5" /><circle cx="19.5" cy="9.5" r="2.5" /><path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z" /></g>
<g id="picture-in-picture"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z" /></g>
<g id="picture-in-picture-alt"><path d="M19 11h-8v6h8v-6zm4 8V4.98C23 3.88 22.1 3 21 3H3c-1.1 0-2 .88-2 1.98V19c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-2 .02H3V4.97h18v14.05z" /></g>
<g id="play-for-work"><path d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z" /></g>
<g id="polymer"><path d="M19 4h-4L7.11 16.63 4.5 12 9 4H5L.5 12 5 20h4l7.89-12.63L19.5 12 15 20h4l4.5-8z" /></g>
<g id="power-settings-new"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" /></g>
<g id="pregnant-woman"><path d="M9 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm7 9c-.01-1.34-.83-2.51-2-3 0-1.66-1.34-3-3-3s-3 1.34-3 3v7h2v5h3v-5h3v-4z" /></g>
<g id="print"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" /></g>
<g id="query-builder"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" /></g>
<g id="question-answer"><path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" /></g>
<g id="radio-button-checked"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /></g>
<g id="radio-button-unchecked"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /></g>
<g id="receipt"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z" /></g>
<g id="record-voice-over"><circle cx="9" cy="9" r="4" /><path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z" /></g>
<g id="redeem"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z" /></g>
<g id="redo"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" /></g>
<g id="refresh"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /></g>
<g id="remove"><path d="M19 13H5v-2h14v2z" /></g>
<g id="remove-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" /></g>
<g id="remove-circle-outline"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></g>
<g id="remove-shopping-cart"><path d="M22.73 22.73L2.77 2.77 2 2l-.73-.73L0 2.54l4.39 4.39 2.21 4.66-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h7.46l1.38 1.38c-.5.36-.83.95-.83 1.62 0 1.1.89 2 1.99 2 .67 0 1.26-.33 1.62-.84L21.46 24l1.27-1.27zM7.42 15c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h2.36l2 2H7.42zm8.13-2c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H6.54l9.01 9zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2z" /></g>
<g id="reorder"><path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z" /></g>
<g id="reply"><path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" /></g>
<g id="reply-all"><path d="M7 8V5l-7 7 7 7v-3l-4-4 4-4zm6 1V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" /></g>
<g id="report"><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z" /></g>
<g id="report-problem"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /></g>
<g id="restore"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" /></g>
<g id="restore-page"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-2 16c-2.05 0-3.81-1.24-4.58-3h1.71c.63.9 1.68 1.5 2.87 1.5 1.93 0 3.5-1.57 3.5-3.5S13.93 9.5 12 9.5c-1.35 0-2.52.78-3.1 1.9l1.6 1.6h-4V9l1.3 1.3C8.69 8.92 10.23 8 12 8c2.76 0 5 2.24 5 5s-2.24 5-5 5z" /></g>
<g id="room"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /></g>
<g id="rounded-corner"><path d="M19 19h2v2h-2v-2zm0-2h2v-2h-2v2zM3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm0-4h2V3H3v2zm4 0h2V3H7v2zm8 16h2v-2h-2v2zm-4 0h2v-2h-2v2zm4 0h2v-2h-2v2zm-8 0h2v-2H7v2zm-4 0h2v-2H3v2zM21 8c0-2.76-2.24-5-5-5h-5v2h5c1.65 0 3 1.35 3 3v5h2V8z" /></g>
<g id="rowing"><path d="M8.5 14.5L4 19l1.5 1.5L9 17h2l-2.5-2.5zM15 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 20.01L18 24l-2.99-3.01V19.5l-7.1-7.09c-.31.05-.61.07-.91.07v-2.16c1.66.03 3.61-.87 4.67-2.04l1.4-1.55c.19-.21.43-.38.69-.5.29-.14.62-.23.96-.23h.03C15.99 6.01 17 7.02 17 8.26v5.75c0 .84-.35 1.61-.92 2.16l-3.58-3.58v-2.27c-.63.52-1.43 1.02-2.29 1.39L16.5 18H18l3 3.01z" /></g>
<g id="save"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" /></g>
<g id="schedule"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" /></g>
<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></g>
<g id="select-all"><path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z" /></g>
<g id="send"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /></g>
<g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" /></g>
<g id="settings-applications"><path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-7H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-1.75 9c0 .23-.02.46-.05.68l1.48 1.16c.13.11.17.3.08.45l-1.4 2.42c-.09.15-.27.21-.43.15l-1.74-.7c-.36.28-.76.51-1.18.69l-.26 1.85c-.03.17-.18.3-.35.3h-2.8c-.17 0-.32-.13-.35-.29l-.26-1.85c-.43-.18-.82-.41-1.18-.69l-1.74.7c-.16.06-.34 0-.43-.15l-1.4-2.42c-.09-.15-.05-.34.08-.45l1.48-1.16c-.03-.23-.05-.46-.05-.69 0-.23.02-.46.05-.68l-1.48-1.16c-.13-.11-.17-.3-.08-.45l1.4-2.42c.09-.15.27-.21.43-.15l1.74.7c.36-.28.76-.51 1.18-.69l.26-1.85c.03-.17.18-.3.35-.3h2.8c.17 0 .32.13.35.29l.26 1.85c.43.18.82.41 1.18.69l1.74-.7c.16-.06.34 0 .43.15l1.4 2.42c.09.15.05.34-.08.45l-1.48 1.16c.03.23.05.46.05.69z" /></g>
<g id="settings-backup-restore"><path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z" /></g>
<g id="settings-bluetooth"><path d="M11 24h2v-2h-2v2zm-4 0h2v-2H7v2zm8 0h2v-2h-2v2zm2.71-18.29L12 0h-1v7.59L6.41 3 5 4.41 10.59 10 5 15.59 6.41 17 11 12.41V20h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 3.83l1.88 1.88L13 7.59V3.83zm1.88 10.46L13 16.17v-3.76l1.88 1.88z" /></g>
<g id="settings-brightness"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02zM8 16h2.5l1.5 1.5 1.5-1.5H16v-2.5l1.5-1.5-1.5-1.5V8h-2.5L12 6.5 10.5 8H8v2.5L6.5 12 8 13.5V16zm4-7c1.66 0 3 1.34 3 3s-1.34 3-3 3V9z" /></g>
<g id="settings-cell"><path d="M7 24h2v-2H7v2zm4 0h2v-2h-2v2zm4 0h2v-2h-2v2zM16 .01L8 0C6.9 0 6 .9 6 2v16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V2c0-1.1-.9-1.99-2-1.99zM16 16H8V4h8v12z" /></g>
<g id="settings-ethernet"><path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" /></g>
<g id="settings-input-antenna"><path d="M12 5c-3.87 0-7 3.13-7 7h2c0-2.76 2.24-5 5-5s5 2.24 5 5h2c0-3.87-3.13-7-7-7zm1 9.29c.88-.39 1.5-1.26 1.5-2.29 0-1.38-1.12-2.5-2.5-2.5S9.5 10.62 9.5 12c0 1.02.62 1.9 1.5 2.29v3.3L7.59 21 9 22.41l3-3 3 3L16.41 21 13 17.59v-3.3zM12 1C5.93 1 1 5.93 1 12h2c0-4.97 4.03-9 9-9s9 4.03 9 9h2c0-6.07-4.93-11-11-11z" /></g>
<g id="settings-input-component"><path d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z" /></g>
<g id="settings-input-composite"><path d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z" /></g>
<g id="settings-input-hdmi"><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z" /></g>
<g id="settings-input-svideo"><path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z" /></g>
<g id="settings-overscan"><path d="M12.01 5.5L10 8h4l-1.99-2.5zM18 10v4l2.5-1.99L18 10zM6 10l-2.5 2.01L6 14v-4zm8 6h-4l2.01 2.5L14 16zm7-13H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /></g>
<g id="settings-phone"><path d="M13 9h-2v2h2V9zm4 0h-2v2h2V9zm3 6.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 9v2h2V9h-2z" /></g>
<g id="settings-power"><path d="M7 24h2v-2H7v2zm4 0h2v-2h-2v2zm2-22h-2v10h2V2zm3.56 2.44l-1.45 1.45C16.84 6.94 18 8.83 18 11c0 3.31-2.69 6-6 6s-6-2.69-6-6c0-2.17 1.16-4.06 2.88-5.12L7.44 4.44C5.36 5.88 4 8.28 4 11c0 4.42 3.58 8 8 8s8-3.58 8-8c0-2.72-1.36-5.12-3.44-6.56zM15 24h2v-2h-2v2z" /></g>
<g id="settings-remote"><path d="M15 9H9c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1zm-3 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM7.05 6.05l1.41 1.41C9.37 6.56 10.62 6 12 6s2.63.56 3.54 1.46l1.41-1.41C15.68 4.78 13.93 4 12 4s-3.68.78-4.95 2.05zM12 0C8.96 0 6.21 1.23 4.22 3.22l1.41 1.41C7.26 3.01 9.51 2 12 2s4.74 1.01 6.36 2.64l1.41-1.41C17.79 1.23 15.04 0 12 0z" /></g>
<g id="settings-voice"><path d="M7 24h2v-2H7v2zm5-11c1.66 0 2.99-1.34 2.99-3L15 4c0-1.66-1.34-3-3-3S9 2.34 9 4v6c0 1.66 1.34 3 3 3zm-1 11h2v-2h-2v2zm4 0h2v-2h-2v2zm4-14h-1.7c0 3-2.54 5.1-5.3 5.1S6.7 13 6.7 10H5c0 3.41 2.72 6.23 6 6.72V20h2v-3.28c3.28-.49 6-3.31 6-6.72z" /></g>
<g id="shop"><path d="M16 6V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H2v13c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6h-6zm-6-2h4v2h-4V4zM9 18V9l7.5 4L9 18z" /></g>
<g id="shop-two"><path d="M3 9H1v11c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2H3V9zm15-4V3c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H5v11c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5h-5zm-6-2h4v2h-4V3zm0 12V8l5.5 3-5.5 4z" /></g>
<g id="shopping-basket"><path d="M17.21 9l-4.38-6.56c-.19-.28-.51-.42-.83-.42-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" /></g>
<g id="shopping-cart"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" /></g>
<g id="sort"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" /></g>
<g id="speaker-notes"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 14H6v-2h2v2zm0-3H6V9h2v2zm0-3H6V6h2v2zm7 6h-5v-2h5v2zm3-3h-8V9h8v2zm0-3h-8V6h8v2z" /></g>
<g id="speaker-notes-off"><path d="M10.54 11l-.54-.54L7.54 8 6 6.46 2.38 2.84 1.27 1.73 0 3l2.01 2.01L2 22l4-4h9l5.73 5.73L22 22.46 17.54 18l-7-7zM8 14H6v-2h2v2zm-2-3V9l2 2H6zm14-9H4.08L10 7.92V6h8v2h-7.92l1 1H18v2h-4.92l6.99 6.99C21.14 17.95 22 17.08 22 16V4c0-1.1-.9-2-2-2z" /></g>
<g id="spellcheck"><path d="M12.45 16h2.09L9.43 3H7.57L2.46 16h2.09l1.12-3h5.64l1.14 3zm-6.02-5L8.5 5.48 10.57 11H6.43zm15.16.59l-8.09 8.09L9.83 16l-1.41 1.41 5.09 5.09L23 13l-1.41-1.41z" /></g>
<g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></g>
<g id="star-border"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" /></g>
<g id="star-half"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" /></g>
<g id="stars"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z" /></g>
<g id="store"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z" /></g>
<g id="subdirectory-arrow-left"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z" /></g>
<g id="subdirectory-arrow-right"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z" /></g>
<g id="subject"><path d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z" /></g>
<g id="supervisor-account"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z" /></g>
<g id="swap-horiz"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" /></g>
<g id="swap-vert"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" /></g>
<g id="swap-vertical-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM6.5 9L10 5.5 13.5 9H11v4H9V9H6.5zm11 6L14 18.5 10.5 15H13v-4h2v4h2.5z" /></g>
<g id="system-update-alt"><path d="M12 16.5l4-4h-3v-9h-2v9H8l4 4zm9-13h-6v1.99h6v14.03H3V5.49h6V3.5H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2z" /></g>
<g id="tab"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z" /></g>
<g id="tab-unselected"><path d="M1 9h2V7H1v2zm0 4h2v-2H1v2zm0-8h2V3c-1.1 0-2 .9-2 2zm8 16h2v-2H9v2zm-8-4h2v-2H1v2zm2 4v-2H1c0 1.1.9 2 2 2zM21 3h-8v6h10V5c0-1.1-.9-2-2-2zm0 14h2v-2h-2v2zM9 5h2V3H9v2zM5 21h2v-2H5v2zM5 5h2V3H5v2zm16 16c1.1 0 2-.9 2-2h-2v2zm0-8h2v-2h-2v2zm-8 8h2v-2h-2v2zm4 0h2v-2h-2v2z" /></g>
<g id="text-format"><path d="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z" /></g>
<g id="theaters"><path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z" /></g>
<g id="thumb-down"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" /></g>
<g id="thumb-up"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z" /></g>
<g id="thumbs-up-down"><path d="M12 6c0-.55-.45-1-1-1H5.82l.66-3.18.02-.23c0-.31-.13-.59-.33-.8L5.38 0 .44 4.94C.17 5.21 0 5.59 0 6v6.5c0 .83.67 1.5 1.5 1.5h6.75c.62 0 1.15-.38 1.38-.91l2.26-5.29c.07-.17.11-.36.11-.55V6zm10.5 4h-6.75c-.62 0-1.15.38-1.38.91l-2.26 5.29c-.07.17-.11.36-.11.55V18c0 .55.45 1 1 1h5.18l-.66 3.18-.02.24c0 .31.13.59.33.8l.79.78 4.94-4.94c.27-.27.44-.65.44-1.06v-6.5c0-.83-.67-1.5-1.5-1.5z" /></g>
<g id="timeline"><path d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z" /></g>
<g id="toc"><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z" /></g>
<g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" /></g>
<g id="toll"><path d="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM3 12c0-2.61 1.67-4.83 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09c-2.33-.82-4-3.04-4-5.65z" /></g>
<g id="touch-app"><path d="M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z" /></g>
<g id="track-changes"><path d="M19.07 4.93l-1.41 1.41C19.1 7.79 20 9.79 20 12c0 4.42-3.58 8-8 8s-8-3.58-8-8c0-4.08 3.05-7.44 7-7.93v2.02C8.16 6.57 6 9.03 6 12c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.66-.67-3.16-1.76-4.24l-1.41 1.41C15.55 9.9 16 10.9 16 12c0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.86 1.28-3.41 3-3.86v2.14c-.6.35-1 .98-1 1.72 0 1.1.9 2 2 2s2-.9 2-2c0-.74-.4-1.38-1-1.72V2h-1C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-2.76-1.12-5.26-2.93-7.07z" /></g>
<g id="translate"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" /></g>
<g id="trending-down"><path d="M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z" /></g>
<g id="trending-flat"><path d="M22 12l-4-4v3H3v2h15v3z" /></g>
<g id="trending-up"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" /></g>
<g id="turned-in"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z" /></g>
<g id="turned-in-not"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z" /></g>
<g id="unarchive"><path d="M20.55 5.22l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.15.55L3.46 5.22C3.17 5.57 3 6.01 3 6.5V19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.49-.17-.93-.45-1.28zM12 9.5l5.5 5.5H14v2h-4v-2H6.5L12 9.5zM5.12 5l.82-1h12l.93 1H5.12z" /></g>
<g id="undo"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" /></g>
<g id="unfold-less"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" /></g>
<g id="unfold-more"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" /></g>
<g id="update"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z" /></g>
<g id="verified-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" /></g>
<g id="view-agenda"><path d="M20 13H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zm0-10H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z" /></g>
<g id="view-array"><path d="M4 18h3V5H4v13zM18 5v13h3V5h-3zM8 18h9V5H8v13z" /></g>
<g id="view-carousel"><path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z" /></g>
<g id="view-column"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z" /></g>
<g id="view-day"><path d="M2 21h19v-3H2v3zM20 8H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zM2 3v3h19V3H2z" /></g>
<g id="view-headline"><path d="M4 15h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V9H4v2zm0-6v2h16V5H4z" /></g>
<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z" /></g>
<g id="view-module"><path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z" /></g>
<g id="view-quilt"><path d="M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z" /></g>
<g id="view-stream"><path d="M4 18h17v-6H4v6zM4 5v6h17V5H4z" /></g>
<g id="view-week"><path d="M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z" /></g>
<g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" /></g>
<g id="visibility-off"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" /></g>
<g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" /></g>
<g id="watch-later"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" /></g>
<g id="weekend"><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" /></g>
<g id="work"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z" /></g>
<g id="youtube-searched-for"><path d="M17.01 14h-.8l-.27-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 3-6.5 6.5H2l3.84 4 4.16-4H6.51C6.51 7 8.53 5 11.01 5s4.5 2.01 4.5 4.5c0 2.48-2.02 4.5-4.5 4.5-.65 0-1.26-.14-1.82-.38L7.71 15.1c.97.57 2.09.9 3.3.9 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l5.01 4.99L22 19l-4.99-5z" /></g>
<g id="zoom-in"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm2.5-4h-2v2H9v-2H7V9h2V7h1v2h2v1z" /></g>
<g id="zoom-out"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" /></g>
</defs></svg>
</iron-iconset-svg>









<dom-module id="paper-icon-button">
  <template strip-whitespace>
    <style>
      :host {
        display: inline-block;
        position: relative;
        padding: 8px;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        z-index: 0;
        line-height: 1;

        width: 40px;
        height: 40px;

        /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;

        /* Because of polymer/2558, this style has lower specificity than * */
        box-sizing: border-box !important;

        @apply --paper-icon-button;
      }

      :host #ink {
        color: var(--paper-icon-button-ink-color, var(--primary-text-color));
        opacity: 0.6;
      }

      :host([disabled]) {
        color: var(--paper-icon-button-disabled-text, var(--disabled-text-color));
        pointer-events: none;
        cursor: auto;

        @apply --paper-icon-button-disabled;
      }

      :host([hidden]) {
        display: none !important;
      }

      :host(:hover) {
        @apply --paper-icon-button-hover;
      }

      iron-icon {
        --iron-icon-width: 100%;
        --iron-icon-height: 100%;
      }
    </style>

    <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
  </template>

  
</dom-module>








<dom-module id="run-color-style">
  <template>
    <style>
      [color-class='light-blue'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-light-blue-500);
        --paper-checkbox-checked-ink-color: var(--paper-light-blue-500);
        --paper-checkbox-unchecked-color: var(--paper-light-blue-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-light-blue-900);
      }
      [color-class='red'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-red-500);
        --paper-checkbox-checked-ink-color: var(--paper-red-500);
        --paper-checkbox-unchecked-color: var(--paper-red-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-red-900);
      }
      [color-class='green'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-green-500);
        --paper-checkbox-checked-ink-color: var(--paper-green-500);
        --paper-checkbox-unchecked-color: var(--paper-green-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
      }
      [color-class='purple'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-purple-500);
        --paper-checkbox-checked-ink-color: var(--paper-purple-500);
        --paper-checkbox-unchecked-color: var(--paper-purple-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-purple-900);
      }
      [color-class='teal'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-teal-500);
        --paper-checkbox-checked-ink-color: var(--paper-teal-500);
        --paper-checkbox-unchecked-color: var(--paper-teal-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-teal-900);
      }
      [color-class='pink'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-pink-500);
        --paper-checkbox-checked-ink-color: var(--paper-pink-500);
        --paper-checkbox-unchecked-color: var(--paper-pink-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-pink-900);
      }
      [color-class='orange'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-orange-500);
        --paper-checkbox-checked-ink-color: var(--paper-orange-500);
        --paper-checkbox-unchecked-color: var(--paper-orange-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-orange-900);
      }
      [color-class='brown'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-brown-500);
        --paper-checkbox-checked-ink-color: var(--paper-brown-500);
        --paper-checkbox-unchecked-color: var(--paper-brown-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-brown-900);
      }
      [color-class='indigo'] paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-indigo-500);
        --paper-checkbox-checked-ink-color: var(--paper-indigo-500);
        --paper-checkbox-unchecked-color: var(--paper-indigo-900);
        --paper-checkbox-unchecked-ink-color: var(--paper-indigo-900);
      }
    </style>
  </template>
</dom-module>




<dom-module id="tf-multi-checkbox">
  <template>
    <style include="scrollbar-style"></style>
    <style include="run-color-style"></style>

    <paper-input id="names-regex" no-label-float label="Write a regex to filter runs" value="[[regex]]" on-bind-value-changed="_debouncedRegexChange"></paper-input>
    <div id="outer-container" class="scrollbar">
      <template is="dom-repeat" items="[[namesMatchingRegex]]" on-dom-change="synchronizeColors">
        <div class="name-row">
          <div class="icon-container checkbox-container vertical-align-container">
            <paper-checkbox class="checkbox vertical-align-center" id$="checkbox-[[item]]" name="[[item]]" checked$="[[_isChecked(item, selectionState.*)]]" on-change="_checkboxChange"></paper-checkbox>
          </div>
          <div class="icon-container isolator-container vertical-align-container">
            <paper-icon-button icon="radio-button-unchecked" class="isolator vertical-align-center" on-tap="_isolateName" name="[[item]]"></paper-icon-button>
          </div>
          <div class="item-label-container">
            <span>[[item]]</span>
          </div>
        </div>
      </template>
    </div>
    <style>
      paper-input {
        --paper-input-container-focus-color: var(--tb-orange-strong);
        --paper-input-container-input: {
          font-size: 14px;
        }
        --paper-input-container-label: {
          font-size: 14px;
        }
      }
      :host {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
      }
      #outer-container {
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
        word-wrap: break-word;
      }
      .name-row {
        padding-top: 5px;
        padding-bottom: 5px;
        display: flex;
        flex-direction: row;
        font-size: 13px;
        word-break: break-all; /* makes wrapping of hyperparam strings better */
      }
      .icon-container {
        flex-grow: 0;
        flex-shrink: 0;
        padding-left: 2px;
      }
      .checkbox {
        padding-left: 2px;
        width: 18px;
        height: 18px;
      }
      .isolator {
        width: 18px;
        height: 18px;
        padding: 0px;
      }
      .isolator-container {
        padding-left: 6px;
        padding-right: 3px;
      }
      .checkbox-container {
        padding-left: 2px;
      }
      .item-label-container {
        padding-left: 5px;
        flex-grow: 1;
        flex-shrink: 1;
        width: 0px; /* hack to get the flex-grow to work properly */
      }
      .tooltip-value-container {
        display: flex;
        justify-content: center;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: right;
        padding-left: 2px;
      }
      .vertical-align-container {
        display: flex;
        justify-content: center;
      }
      .vertical-align-container .vertical-align-center {
        align-self: center;
      }
      .vertical-align-container .vertical-align-top {
        align-self: start;
      }
    </style>
  </template>
  
</dom-module>




<dom-module id="tf-wbr-string">
  <template>
    
    <template is="dom-repeat" items="[[_parts]]" as="part">[[part]]<wbr></template>
  </template>
  
</dom-module>



<dom-module id="tf-runs-selector">
  <template>
    <paper-dialog with-backdrop id="data-location-dialog">
      <h2>Data Location</h2>
      <tf-wbr-string value="[[dataLocation]]" />
    </paper-dialog>
    <div id="top-text">
      <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
    </div>
    <tf-multi-checkbox id="multiCheckbox" names="[[runs]]" selection-state="{{runSelectionState}}" out-selected="{{selectedRuns}}" regex="{{regexInput}}" coloring="[[coloring]]"></tf-multi-checkbox>
    <paper-button class="x-button" id="toggle-all" on-tap="_toggleAll">
      Toggle All Runs
    </paper-button>
    <template is="dom-if" if="[[dataLocation]]">
      <div id="data-location">
        <tf-wbr-string value="[[_clippedDataLocation]]" /><template is="dom-if" if="[[_shouldShowExpandDataLocationButton(dataLocation, _dataLocationClipLength)]]"><a href="" on-click="_openDataLocationDialog">…</a>
        </template>
      </div>
    </template>
    <style>
      :host {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
      }
      #top-text {
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 16px;
        box-sizing: border-box;
        color: var(--paper-grey-800);
      }
      tf-multi-checkbox {
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
      }
      .x-button {
        font-size: 13px;
        background-color: var(--tb-ui-light-accent);
        color: var(--tb-ui-dark-accent);
      }
      #tooltip-help {
        color: var(--paper-grey-800);
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        margin-bottom: 5px;
      }
      paper-button {
        margin-left: 0;
      }
      #data-location {
        color: var(--tb-ui-dark-accent);
        font-size: 13px;
        margin: 5px 0 0 0;
        max-width: 288px;
      }
    </style>
  </template>
  
</dom-module>




















<dom-module id="paper-spinner-styles">
  <template>
    <style>
      /*
      /**************************/
      /* STYLES FOR THE SPINNER */
      /**************************/

      /*
       * Constants:
       *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
       *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
       *      ARCSTARTROT = 216 degrees (how much the start location of the arc
       *                                should rotate each time, 216 gives us a
       *                                5 pointed star shape (it's 360/5 * 3).
       *                                For a 7 pointed star, we might do
       *                                360/7 * 3 = 154.286)
       *      SHRINK_TIME = 400ms
       */

      :host {
        display: inline-block;
        position: relative;
        width: 28px;
        height: 28px;

        /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
        --paper-spinner-container-rotation-duration: 1568ms;

        /* ARCTIME */
        --paper-spinner-expand-contract-duration: 1333ms;

        /* 4 * ARCTIME */
        --paper-spinner-full-cycle-duration: 5332ms;

        /* SHRINK_TIME */
        --paper-spinner-cooldown-duration: 400ms;
      }

      #spinnerContainer {
        width: 100%;
        height: 100%;

        /* The spinner does not have any contents that would have to be
         * flipped if the direction changes. Always use ltr so that the
         * style works out correctly in both cases. */
        direction: ltr;
      }

      #spinnerContainer.active {
        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
      }

      @-webkit-keyframes container-rotate {
        to { -webkit-transform: rotate(360deg) }
      }

      @keyframes container-rotate {
        to { transform: rotate(360deg) }
      }

      .spinner-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        white-space: nowrap;
        color: var(--paper-spinner-color, var(--google-blue-500));
      }

      .layer-1 {
        color: var(--paper-spinner-layer-1-color, var(--google-blue-500));
      }

      .layer-2 {
        color: var(--paper-spinner-layer-2-color, var(--google-red-500));
      }

      .layer-3 {
        color: var(--paper-spinner-layer-3-color, var(--google-yellow-500));
      }

      .layer-4 {
        color: var(--paper-spinner-layer-4-color, var(--google-green-500));
      }

      /**
       * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
       *
       * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
       * guarantee that the animation will start _exactly_ after that value. So we avoid using
       * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
       * seems).
       */
      .active .spinner-layer {
        -webkit-animation-name: fill-unfill-rotate;
        -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-animation-iteration-count: infinite;
        animation-name: fill-unfill-rotate;
        animation-duration: var(--paper-spinner-full-cycle-duration);
        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
        animation-iteration-count: infinite;
        opacity: 1;
      }

      .active .spinner-layer.layer-1 {
        -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
        animation-name: fill-unfill-rotate, layer-1-fade-in-out;
      }

      .active .spinner-layer.layer-2 {
        -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
        animation-name: fill-unfill-rotate, layer-2-fade-in-out;
      }

      .active .spinner-layer.layer-3 {
        -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
        animation-name: fill-unfill-rotate, layer-3-fade-in-out;
      }

      .active .spinner-layer.layer-4 {
        -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
        animation-name: fill-unfill-rotate, layer-4-fade-in-out;
      }

      @-webkit-keyframes fill-unfill-rotate {
        12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
        25%   { -webkit-transform: rotate(270deg) } /* 1   * ARCSIZE */
        37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
        50%   { -webkit-transform: rotate(540deg) } /* 2   * ARCSIZE */
        62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
        75%   { -webkit-transform: rotate(810deg) } /* 3   * ARCSIZE */
        87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
        to    { -webkit-transform: rotate(1080deg) } /* 4   * ARCSIZE */
      }

      @keyframes fill-unfill-rotate {
        12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
        25%   { transform: rotate(270deg) } /* 1   * ARCSIZE */
        37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
        50%   { transform: rotate(540deg) } /* 2   * ARCSIZE */
        62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
        75%   { transform: rotate(810deg) } /* 3   * ARCSIZE */
        87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
        to    { transform: rotate(1080deg) } /* 4   * ARCSIZE */
      }

      @-webkit-keyframes layer-1-fade-in-out {
        0% { opacity: 1 }
        25% { opacity: 1 }
        26% { opacity: 0 }
        89% { opacity: 0 }
        90% { opacity: 1 }
        to { opacity: 1 }
      }

      @keyframes layer-1-fade-in-out {
        0% { opacity: 1 }
        25% { opacity: 1 }
        26% { opacity: 0 }
        89% { opacity: 0 }
        90% { opacity: 1 }
        to { opacity: 1 }
      }

      @-webkit-keyframes layer-2-fade-in-out {
        0% { opacity: 0 }
        15% { opacity: 0 }
        25% { opacity: 1 }
        50% { opacity: 1 }
        51% { opacity: 0 }
        to { opacity: 0 }
      }

      @keyframes layer-2-fade-in-out {
        0% { opacity: 0 }
        15% { opacity: 0 }
        25% { opacity: 1 }
        50% { opacity: 1 }
        51% { opacity: 0 }
        to { opacity: 0 }
      }

      @-webkit-keyframes layer-3-fade-in-out {
        0% { opacity: 0 }
        40% { opacity: 0 }
        50% { opacity: 1 }
        75% { opacity: 1 }
        76% { opacity: 0 }
        to { opacity: 0 }
      }

      @keyframes layer-3-fade-in-out {
        0% { opacity: 0 }
        40% { opacity: 0 }
        50% { opacity: 1 }
        75% { opacity: 1 }
        76% { opacity: 0 }
        to { opacity: 0 }
      }

      @-webkit-keyframes layer-4-fade-in-out {
        0% { opacity: 0 }
        65% { opacity: 0 }
        75% { opacity: 1 }
        90% { opacity: 1 }
        to { opacity: 0 }
      }

      @keyframes layer-4-fade-in-out {
        0% { opacity: 0 }
        65% { opacity: 0 }
        75% { opacity: 1 }
        90% { opacity: 1 }
        to { opacity: 0 }
      }

      .circle-clipper {
        display: inline-block;
        position: relative;
        width: 50%;
        height: 100%;
        overflow: hidden;
      }

      /**
       * Patch the gap that appear between the two adjacent div.circle-clipper while the
       * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
       */
      .spinner-layer::after {
        left: 45%;
        width: 10%;
        border-top-style: solid;
      }

      .spinner-layer::after,
      .circle-clipper::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 0;
        border-width: var(--paper-spinner-stroke-width, 3px);
        border-radius: 50%;
      }

      .circle-clipper::after {
        bottom: 0;
        width: 200%;
        border-style: solid;
        border-bottom-color: transparent !important;
      }

      .circle-clipper.left::after {
        left: 0;
        border-right-color: transparent !important;
        -webkit-transform: rotate(129deg);
        transform: rotate(129deg);
      }

      .circle-clipper.right::after {
        left: -100%;
        border-left-color: transparent !important;
        -webkit-transform: rotate(-129deg);
        transform: rotate(-129deg);
      }

      .active .gap-patch::after,
      .active .circle-clipper::after {
        -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-animation-iteration-count: infinite;
        animation-duration: var(--paper-spinner-expand-contract-duration);
        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
        animation-iteration-count: infinite;
      }

      .active .circle-clipper.left::after {
        -webkit-animation-name: left-spin;
        animation-name: left-spin;
      }

      .active .circle-clipper.right::after {
        -webkit-animation-name: right-spin;
        animation-name: right-spin;
      }

      @-webkit-keyframes left-spin {
        0% { -webkit-transform: rotate(130deg) }
        50% { -webkit-transform: rotate(-5deg) }
        to { -webkit-transform: rotate(130deg) }
      }

      @keyframes left-spin {
        0% { transform: rotate(130deg) }
        50% { transform: rotate(-5deg) }
        to { transform: rotate(130deg) }
      }

      @-webkit-keyframes right-spin {
        0% { -webkit-transform: rotate(-130deg) }
        50% { -webkit-transform: rotate(5deg) }
        to { -webkit-transform: rotate(-130deg) }
      }

      @keyframes right-spin {
        0% { transform: rotate(-130deg) }
        50% { transform: rotate(5deg) }
        to { transform: rotate(-130deg) }
      }

      #spinnerContainer.cooldown {
        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
      }

      @-webkit-keyframes fade-out {
        0% { opacity: 1 }
        to { opacity: 0 }
      }

      @keyframes fade-out {
        0% { opacity: 1 }
        to { opacity: 0 }
      }
    </style>
  </template>
</dom-module>




<dom-module id="paper-spinner-lite">
  <template strip-whitespace>
    <style include="paper-spinner-styles"></style>

    <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
      <div class="spinner-layer">
        <div class="circle-clipper left"></div>
        <div class="circle-clipper right"></div>
      </div>
    </div>
  </template>

  
</dom-module>











<style>
.plottable-colors-0 {
  background-color: #5279c7; /* INDIGO */
}

.plottable-colors-1 {
  background-color: #fd373e; /* CORAL_RED */
}

.plottable-colors-2 {
  background-color: #63c261; /* FERN */
}

.plottable-colors-3 {
  background-color: #fad419; /* BRIGHT_SUN */
}

.plottable-colors-4 {
  background-color: #2c2b6f; /* JACARTA */
}

.plottable-colors-5 {
  background-color: #ff7939; /* BURNING_ORANGE */
}

.plottable-colors-6 {
  background-color: #db2e65; /* CERISE_RED */
}

.plottable-colors-7 {
  background-color: #99ce50; /* CONIFER */
}

.plottable-colors-8 {
  background-color: #962565; /* ROYAL_HEATH */
}

.plottable-colors-9 {
  background-color: #06cccc; /* ROBINS_EGG_BLUE */
}

/**
 * User-supplied renderTo element.
 */
.plottable {
  display: block; /* must be block elements for width/height calculations to work in Firefox. */
  pointer-events: visibleFill;
  position: relative;
  /**
   * Pre 3.0, users could set the dimension of the root element in two ways: either using CSS
   * (inline or through a stylesheet), or using the SVG width/height attributes. By default, we
   * set the SVG width/height attributes to 100%.
   *
   * Post 3.0 the root element is always a normal div and the only way to set the dimensions is
   * to use CSS. To replicate the "100%-by-default" behavior, we apply width/height 100%.
   */
  width: 100%;
  height: 100%;
}

/**
 * The _element that roots each Component's DOM.
 */
.plottable .component {
  /* Allow components to be positioned with explicit left/top/width/height styles */
  position: absolute;
}

.plottable .background-container,
.plottable .content,
.plottable .foreground-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

/**
 * Don't allow svg elements above the content to steal events
 */
.plottable .foreground-container {
  pointer-events: none;
}

.plottable .component-overflow-hidden {
  overflow: hidden;
}

.plottable .component-overflow-visible {
  overflow: visible;
}

.plottable .plot-canvas-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.plottable .plot-canvas {
  width: 100%;
  height: 100%;
  /**
   * Play well with deferred rendering.
   */
  transform-origin: 0px 0px 0px;
}

.plottable text {
  text-rendering: geometricPrecision;
}

.plottable .label text {
  font-family: "Helvetica Neue", sans-serif;
  fill: #32313F;
}

.plottable .bar-label-text-area text {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
}

.plottable .label-area text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
}

.plottable .light-label text {
  fill: white;
}

.plottable .dark-label text {
  fill: #32313F;
}

.plottable .off-bar-label text {
  fill: #32313F;
}

.plottable .stacked-bar-label text {
  fill: #32313F;
  font-style: normal;
}

.plottable .stacked-bar-plot .off-bar-label {
  /* HACKHACK #2795: correct off-bar label logic to be implemented on StackedBar */
  visibility: hidden !important;
}

.plottable .axis-label text {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: normal;
  text-transform: uppercase;
}

.plottable .title-label text {
  font-size: 20px;
  font-weight: bold;
}

.plottable .axis line.baseline {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis line.tick-mark {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: normal;
}

.plottable .axis .annotation-circle {
  fill: white;
  stroke-width: 1px;
  stroke: #CCC;
}

.plottable .axis .annotation-line {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis .annotation-rect {
  stroke: #CCC;
  stroke-width: 1px;
  fill: white;
}

.plottable .bar-plot .baseline {
  stroke: #999;
}

.plottable .gridlines line {
  stroke: #3C3C3C; /* hackhack: gridlines should be solid; see #820 */
  opacity: 0.25;
  stroke-width: 1px;
}

.plottable .selection-box-layer .selection-area {
  fill: black;
  fill-opacity: 0.03;
  stroke: #CCC;
}
/* DragBoxLayer */
.plottable .drag-box-layer.x-resizable .drag-edge-lr {
  cursor: ew-resize;
}
.plottable .drag-box-layer.y-resizable .drag-edge-tb {
  cursor: ns-resize;
}

.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tl {
  cursor: nwse-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tr {
  cursor: nesw-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-bl {
  cursor: nesw-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-br {
  cursor: nwse-resize;
}

.plottable .drag-box-layer.movable .selection-area {
  cursor: move; /* IE fallback */
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}

.plottable .drag-box-layer.movable .selection-area:active {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/* /DragBoxLayer */

.plottable .guide-line-layer line.guide-line {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .drag-line-layer.enabled.vertical line.drag-edge {
  cursor: ew-resize;
}

.plottable .drag-line-layer.enabled.horizontal line.drag-edge {
  cursor: ns-resize;
}

.plottable .legend text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: normal;
}

.plottable .interpolated-color-legend rect.swatch-bounding-box {
  fill: none;
  stroke: #CCC;
  stroke-width: 1px;
  pointer-events: none;
}

.plottable .waterfall-plot line.connector {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .pie-plot .arc.outline {
  stroke-linejoin: round;
}
</style>

<dom-module id="plottable-style">
  <template>
    <style>
.plottable-colors-0 {
  background-color: #5279c7; /* INDIGO */
}

.plottable-colors-1 {
  background-color: #fd373e; /* CORAL_RED */
}

.plottable-colors-2 {
  background-color: #63c261; /* FERN */
}

.plottable-colors-3 {
  background-color: #fad419; /* BRIGHT_SUN */
}

.plottable-colors-4 {
  background-color: #2c2b6f; /* JACARTA */
}

.plottable-colors-5 {
  background-color: #ff7939; /* BURNING_ORANGE */
}

.plottable-colors-6 {
  background-color: #db2e65; /* CERISE_RED */
}

.plottable-colors-7 {
  background-color: #99ce50; /* CONIFER */
}

.plottable-colors-8 {
  background-color: #962565; /* ROYAL_HEATH */
}

.plottable-colors-9 {
  background-color: #06cccc; /* ROBINS_EGG_BLUE */
}

/**
 * User-supplied renderTo element.
 */
.plottable {
  display: block; /* must be block elements for width/height calculations to work in Firefox. */
  pointer-events: visibleFill;
  position: relative;
  /**
   * Pre 3.0, users could set the dimension of the root element in two ways: either using CSS
   * (inline or through a stylesheet), or using the SVG width/height attributes. By default, we
   * set the SVG width/height attributes to 100%.
   *
   * Post 3.0 the root element is always a normal div and the only way to set the dimensions is
   * to use CSS. To replicate the "100%-by-default" behavior, we apply width/height 100%.
   */
  width: 100%;
  height: 100%;
}

/**
 * The _element that roots each Component's DOM.
 */
.plottable .component {
  /* Allow components to be positioned with explicit left/top/width/height styles */
  position: absolute;
}

.plottable .background-container,
.plottable .content,
.plottable .foreground-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

/**
 * Don't allow svg elements above the content to steal events
 */
.plottable .foreground-container {
  pointer-events: none;
}

.plottable .component-overflow-hidden {
  overflow: hidden;
}

.plottable .component-overflow-visible {
  overflow: visible;
}

.plottable .plot-canvas-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.plottable .plot-canvas {
  width: 100%;
  height: 100%;
  /**
   * Play well with deferred rendering.
   */
  transform-origin: 0px 0px 0px;
}

.plottable text {
  text-rendering: geometricPrecision;
}

.plottable .label text {
  font-family: "Helvetica Neue", sans-serif;
  fill: #32313F;
}

.plottable .bar-label-text-area text {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
}

.plottable .label-area text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
}

.plottable .light-label text {
  fill: white;
}

.plottable .dark-label text {
  fill: #32313F;
}

.plottable .off-bar-label text {
  fill: #32313F;
}

.plottable .stacked-bar-label text {
  fill: #32313F;
  font-style: normal;
}

.plottable .stacked-bar-plot .off-bar-label {
  /* HACKHACK #2795: correct off-bar label logic to be implemented on StackedBar */
  visibility: hidden !important;
}

.plottable .axis-label text {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: normal;
  text-transform: uppercase;
}

.plottable .title-label text {
  font-size: 20px;
  font-weight: bold;
}

.plottable .axis line.baseline {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis line.tick-mark {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: normal;
}

.plottable .axis .annotation-circle {
  fill: white;
  stroke-width: 1px;
  stroke: #CCC;
}

.plottable .axis .annotation-line {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis .annotation-rect {
  stroke: #CCC;
  stroke-width: 1px;
  fill: white;
}

.plottable .bar-plot .baseline {
  stroke: #999;
}

.plottable .gridlines line {
  stroke: #3C3C3C; /* hackhack: gridlines should be solid; see #820 */
  opacity: 0.25;
  stroke-width: 1px;
}

.plottable .selection-box-layer .selection-area {
  fill: black;
  fill-opacity: 0.03;
  stroke: #CCC;
}
/* DragBoxLayer */
.plottable .drag-box-layer.x-resizable .drag-edge-lr {
  cursor: ew-resize;
}
.plottable .drag-box-layer.y-resizable .drag-edge-tb {
  cursor: ns-resize;
}

.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tl {
  cursor: nwse-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tr {
  cursor: nesw-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-bl {
  cursor: nesw-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-br {
  cursor: nwse-resize;
}

.plottable .drag-box-layer.movable .selection-area {
  cursor: move; /* IE fallback */
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}

.plottable .drag-box-layer.movable .selection-area:active {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/* /DragBoxLayer */

.plottable .guide-line-layer line.guide-line {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .drag-line-layer.enabled.vertical line.drag-edge {
  cursor: ew-resize;
}

.plottable .drag-line-layer.enabled.horizontal line.drag-edge {
  cursor: ns-resize;
}

.plottable .legend text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: normal;
}

.plottable .interpolated-color-legend rect.swatch-bounding-box {
  fill: none;
  stroke: #CCC;
  stroke-width: 1px;
  pointer-events: none;
}

.plottable .waterfall-plot line.connector {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .pie-plot .arc.outline {
  stroke-linejoin: round;
}
</style>
  </template>
</dom-module>













<dom-module id="vz-chart-tooltip">
  
</dom-module>











<dom-module id="vz-pan-zoom-style">
  <template>
    <style>
      .help {
        align-items: center;
        animation-delay: 1s;
        animation-duration: 1s;
        animation-name: fade-out;
        background: rgba(30, 30, 30, 0.6);
        bottom: 0;
        color: #fff;
        display: flex;
        justify-content: center;
        left: 0;
        opacity: 1;
        padding: 20px;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
      }

      .help > span {
        white-space: normal;
      }

      @keyframes fade-out {
        0% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }
    </style>
  </template>
</dom-module>



<dom-module id="vz-line-chart2">
  <template>
    <div id="chartdiv"></div>
    <vz-chart-tooltip id="tooltip" position="[[tooltipPosition]]" content-component-name="vz-line-chart-tooltip"></vz-chart-tooltip>
    <style include="plottable-style"></style>
    <style include="vz-pan-zoom-style"></style>
    <style>
      :host {
        -moz-user-select: none;
        -webkit-user-select: none;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        outline: none;
        position: relative;
        white-space: nowrap;
      }
      div {
        -webkit-user-select: none;
        -moz-user-select: none;
        flex-grow: 1;
        flex-shrink: 1;
      }

      #chartdiv .main {
        cursor: crosshair;
      }

      :host(.pankey) #chartdiv :not(.drag-zooming) .main {
        cursor: -webkit-grab;
        cursor: grab;
      }

      :host(.mousedown) #chartdiv .panning .main {
        cursor: -webkit-grabbing;
        cursor: grabbing;
      }

      #chartdiv line.guide-line {
        stroke: #999;
        stroke-width: 1.5px;
      }
      #chartdiv:hover {
        will-change: transform;
      }

      .ghost {
        opacity: 0.2;
        stroke-width: 1px;
      }
    </style>
  </template>
  
  
  
  
  
</dom-module>

<dom-module id="vz-line-chart-tooltip">
  <template>
    <div class="content">
      <table>
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>
    <style>
      :host {
        pointer-events: none;
      }

      .content {
        background: rgba(0, 0, 0, 0.8);
        border-radius: 4px;
        color: #fff;
        overflow: hidden;
        pointer-events: none;
      }

      table {
        font-size: 13px;
        line-height: 1.4em;
        margin-top: 10px;
        padding: 8px;
      }

      thead {
        font-size: 14px;
      }

      tbody {
        font-size: 13px;
        line-height: 21px;
        white-space: nowrap;
      }

      td {
        padding: 0 5px;
      }

      .swatch {
        border-radius: 50%;
        display: block;
        height: 18px;
        width: 18px;
      }

      .closest .swatch {
        box-shadow: inset 0 0 0 2px #fff;
      }

      th {
        padding: 0 5px;
        text-align: left;
      }

      .distant td:not(.swatch) {
        opacity: 0.8;
      }

      .ghost {
        opacity: 0.2;
        stroke-width: 1px;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-line-chart-data-loader">
  <template>
    <div id="chart-and-spinner-container">
      <vz-line-chart2 id="chart" data-loading$="[[dataLoading]]" color-scale="[[colorScale]]" default-x-range="[[defaultXRange]]" default-y-range="[[defaultYRange]]" fill-area="[[fillArea]]" ignore-y-outliers="[[ignoreYOutliers]]" on-chart-attached="_onChartAttached" smoothing-enabled="[[smoothingEnabled]]" smoothing-weight="[[smoothingWeight]]" symbol-function="[[symbolFunction]]" tooltip-columns="[[tooltipColumns]]" tooltip-position="[[tooltipPosition]]" tooltip-sorting-method="[[tooltipSortingMethod]]" x-components-creation-method="[[xComponentsCreationMethod]]" x-type="[[xType]]" y-value-accessor="[[yValueAccessor]]"></vz-line-chart2>
      <template is="dom-if" if="[[dataLoading]]">
        <div id="loading-spinner-container">
          <paper-spinner-lite active></paper-spinner-lite>
        </div>
      </template>
    </div>
    <style>
      :host {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      :host([_maybe-rendered-in-bad-state]) vz-line-chart {
        visibility: hidden;
      }

      #chart-and-spinner-container {
        display: flex;
        flex-grow: 1;
        position: relative;
      }

      #loading-spinner-container {
        align-items: center;
        bottom: 0;
        display: flex;
        display: flex;
        justify-content: center;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
      }

      vz-line-chart2 {
        -webkit-user-select: none;
        -moz-user-select: none;
      }

      vz-line-chart2[data-loading] {
        opacity: 0.3;
      }
    </style>
  </template>
  
  
</dom-module>










<dom-module id="paper-dialog-scrollable">

  <template>
    <style>

      :host {
        display: block;
        @apply --layout-relative;
      }

      :host(.is-scrolled:not(:first-child))::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--divider-color);
      }

      :host(.can-scroll:not(.scrolled-to-bottom):not(:last-child))::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--divider-color);
      }

      .scrollable {
        padding: 0 24px;

        @apply --layout-scroll;
        @apply --paper-dialog-scrollable;
      }

      .fit {
        @apply --layout-fit;
      }
    </style>

    <div id="scrollable" class="scrollable" on-scroll="updateScrollState">
      <slot></slot>
    </div>
  </template>

</dom-module>







<dom-module id="tf-markdown-view">
  <template>
    <div id="markdown" inner-h-t-m-l="[[html]]"></div>
    <style>
      /*
       * Reduce topmost and bottommost margins from 16px to 0.3em (renders
       * at about 4.8px) to keep the layout compact. This improves the
       * appearance when there is only one line of text; standard Markdown
       * renderers will still include a `<p>` element.
       *
       * By targeting only the top-level, extremal elements, we preserve any
       * actual paragraph breaks and only change the padding against the
       * component edges.
       */
      #markdown > p:first-child {
        margin-top: 0.3em;
      }
      #markdown > p:last-child {
        margin-bottom: 0.3em;
      }

      /* Pleasant styles for Markdown tables. */
      #markdown table {
        border-collapse: collapse;
      }
      #markdown table th {
        font-weight: 600;
      }
      #markdown table th,
      #markdown table td {
        padding: 6px 13px;
        border: 1px solid #dfe2e5;
      }
      #markdown table tr {
        background-color: #fff;
        border-top: 1px solid #c6cbd1;
      }
    </style>
  </template>
  
</dom-module>

<dom-module id="tf-card-heading-style">
  <template>
    <style>
      figcaption {
        width: 100%;
      }

      /** Horizontal line of labels. */
      .heading-row {
        margin-top: -4px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

      /** Piece of text in the figure caption. */
      .heading-label {
        flex-grow: 1;
        margin-top: 4px;
        max-width: 100%;
        word-wrap: break-word;
      }

      /** Makes label show on the right. */
      .heading-right {
        flex-grow: 0;
      }
    </style>
  </template>
</dom-module>





<dom-module id="tf-card-heading">
  <template>
    <div class="container">
      <figcaption class="content">
        <div class="heading-row">
          <template is="dom-if" if="[[_nameLabel]]">
            <div itemprop="name" class="heading-label name">
              [[_nameLabel]]
            </div>
          </template>
          <template is="dom-if" if="[[run]]">
            
            
            <span>
              <span itemprop="run" id="heading-run" class="heading-label heading-right run">[[run]]</span>
            </span>
          </template>
        </div>
        <template is="dom-if" if="[[_tagLabel]]">
          <div class="heading-row">
            <div class="heading-label">
              tag: <span itemprop="tag">[[_tagLabel]]</span>
            </div>
          </div>
        </template>
        <slot></slot>
      </figcaption>
      <template is="dom-if" if="[[description]]">
        <paper-icon-button icon="info" on-tap="_toggleDescriptionDialog" title="Show summary description"></paper-icon-button>
      </template>
      <paper-dialog id="descriptionDialog" no-overlap horizontal-align="auto" vertical-align="auto">
        <paper-dialog-scrollable>
          <tf-markdown-view html="[[description]]"></tf-markdown-view>
        </paper-dialog-scrollable>
      </paper-dialog>
    </div>
    <style include="tf-card-heading-style">
      .container {
        display: flex;
      }
      .content {
        font-size: 12px;
        flex-grow: 1;
      }
      .name {
        font-size: 14px;
      }
      .run {
        font-size: 11px;
        width: auto;
        border-radius: 3px;
        font-weight: bold;
        padding: 1px 4px 2px;
      }
      paper-icon-button {
        flex-grow: 0;
      }
      paper-dialog-scrollable {
        max-width: 640px;
      }
      #heading-run {
        background: var(--tf-card-heading-background-color);
        color: var(--tf-card-heading-color);
      }
    </style>
  </template>
  
</dom-module>






<dom-module id="tf-downloader">
  <template>
    <paper-dropdown-menu no-label-float="true" label="run to download" selected-item-label="{{_run}}">
      <paper-listbox slot="dropdown-content">
        <template is="dom-repeat" items="[[runs]]">
          <paper-item no-label-float="true">[[item]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>
    <template is="dom-if" if="[[_run]]">
      <a download="[[_csvName(tag, _run)]]" href="[[_csvUrl(tag, _run, urlFn)]]">CSV</a><a download="[[_jsonName(tag, _run)]]" href="[[_jsonUrl(tag, _run, urlFn)]]">JSON</a>
    </template>
    <style>
      :host {
        display: flex;
        align-items: center;
        height: 32px;
      }
      paper-dropdown-menu {
        width: 100px;
        --paper-input-container-label: {
          font-size: 10px;
        }
        --paper-input-container-input: {
          font-size: 10px;
        }
      }
      a {
        font-size: 10px;
        margin: 0 0.2em;
      }
      paper-input {
        font-size: 22px;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-scalar-card">
  <template>
    <tf-card-heading tag="[[tag]]" display-name="[[tagMetadata.displayName]]" description="[[tagMetadata.description]]"></tf-card-heading>
    <div id="tf-line-chart-data-loader-container">
      <tf-line-chart-data-loader active="[[active]]" color-scale="[[_getColorScale(colorScale)]]" data-series="[[_getDataSeries(dataToLoad.*)]]" data-to-load="[[dataToLoad]]" get-data-load-name="[[_getDataLoadName]]" get-data-load-url="[[getDataLoadUrl]]" request-data="[[requestData]]" ignore-y-outliers="[[ignoreYOutliers]]" load-data-callback="[[_loadDataCallback]]" load-key="[[tag]]" log-scale-active="[[_logScaleActive]]" request-manager="[[requestManager]]" smoothing-enabled="[[smoothingEnabled]]" smoothing-weight="[[smoothingWeight]]" tag-metadata="[[tagMetadata]]" tooltip-columns="[[_tooltipColumns]]" tooltip-position="auto" tooltip-sorting-method="[[tooltipSortingMethod]]" x-type="[[xType]]">
      </tf-line-chart-data-loader>
    </div>
    <div id="buttons">
      <paper-icon-button selected$="[[_expanded]]" icon="fullscreen" on-tap="_toggleExpanded"></paper-icon-button>
      <paper-icon-button selected$="[[_logScaleActive]]" icon="line-weight" on-tap="_toggleLogScale" title="Toggle y-axis log scale"></paper-icon-button>
      <paper-icon-button icon="settings-overscan" on-tap="_resetDomain" title="Fit domain to data"></paper-icon-button>
      <template is="dom-if" if="[[showDownloadLinks]]">
        <paper-menu-button on-paper-dropdown-open="_updateDownloadLink">
          <paper-icon-button class="dropdown-trigger" slot="dropdown-trigger" icon="file-download"></paper-icon-button>
          <paper-listbox class="dropdown-content" slot="dropdown-content">
            <paper-item>
              <a id="svgLink" download="[[tag]].svg">
                Download Current Chart as SVG
              </a>
            </paper-item>
          </paper-listbox>
        </paper-menu-button>
      </template>
      <span style="flex-grow: 1"></span>
      <template is="dom-if" if="[[showDownloadLinks]]">
        <div class="download-links">
          <tf-downloader runs="[[_runsFromData(dataToLoad)]]" tag="[[tag]]" url-fn="[[_downloadUrlFn]]"></tf-downloader>
        </div>
      </template>
    </div>
    <style>
      :host {
        margin: 5px;
        display: block;
        width: 330px;
      }

      :host([_expanded]) {
        width: 100%;
      }

      :host([_expanded]) #tf-line-chart-data-loader-container {
        height: 400px;
      }

      #tf-line-chart-data-loader-container {
        height: 200px;
        width: 100%;
      }

      tf-card-heading {
        display: block;
        margin-bottom: 10px;
      }

      #buttons {
        display: flex;
        flex-direction: row;
      }

      paper-icon-button {
        color: #2196f3;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        padding: 4px;
      }

      paper-icon-button[selected] {
        background: var(--tb-ui-light-accent);
      }

      .download-links {
        display: flex;
        height: 32px;
      }

      .download-links a {
        align-self: center;
        font-size: 10px;
        margin: 2px;
      }

      .download-links paper-dropdown-menu {
        width: 100px;
        --paper-input-container-label: {
          font-size: 10px;
        }
        --paper-input-container-input: {
          font-size: 10px;
        }
      }

      paper-menu-button {
        padding: 0;
      }
      paper-item a {
        color: inherit;
        text-decoration: none;
        white-space: nowrap;
      }
    </style>
  </template>
  
</dom-module>




















<dom-module id="paper-progress">
  <template>
    <style>
      :host {
        display: block;
        width: 200px;
        position: relative;
        overflow: hidden;
      }

      :host([hidden]), [hidden] {
        display: none !important;
      }

      #progressContainer {
        @apply --paper-progress-container;
        position: relative;
      }

      #progressContainer,
      /* the stripe for the indeterminate animation*/
      .indeterminate::after {
        height: var(--paper-progress-height, 4px);
      }

      #primaryProgress,
      #secondaryProgress,
      .indeterminate::after {
        @apply --layout-fit;
      }

      #progressContainer,
      .indeterminate::after {
        background: var(--paper-progress-container-color, var(--google-grey-300));
      }

      :host(.transiting) #primaryProgress,
      :host(.transiting) #secondaryProgress {
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;

        /* Duration */
        -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
        transition-duration: var(--paper-progress-transition-duration, 0.08s);

        /* Timing function */
        -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
        transition-timing-function: var(--paper-progress-transition-timing-function, ease);

        /* Delay */
        -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
        transition-delay: var(--paper-progress-transition-delay, 0s);
      }

      #primaryProgress,
      #secondaryProgress {
        @apply --layout-fit;
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        will-change: transform;
      }

      #primaryProgress {
        background: var(--paper-progress-active-color, var(--google-green-500));
      }

      #secondaryProgress {
        background: var(--paper-progress-secondary-color, var(--google-green-100));
      }

      :host([disabled]) #primaryProgress {
        background: var(--paper-progress-disabled-active-color, var(--google-grey-500));
      }

      :host([disabled]) #secondaryProgress {
        background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300));
      }

      :host(:not([disabled])) #primaryProgress.indeterminate {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
        animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
      }

      :host(:not([disabled])) #primaryProgress.indeterminate::after {
        content: "";
        -webkit-transform-origin: center center;
        transform-origin: center center;

        -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
        animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
      }

      @-webkit-keyframes indeterminate-bar {
        0% {
          -webkit-transform: scaleX(1) translateX(-100%);
        }
        50% {
          -webkit-transform: scaleX(1) translateX(0%);
        }
        75% {
          -webkit-transform: scaleX(1) translateX(0%);
          -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
        }
        100% {
          -webkit-transform: scaleX(0) translateX(0%);
        }
      }

      @-webkit-keyframes indeterminate-splitter {
        0% {
          -webkit-transform: scaleX(.75) translateX(-125%);
        }
        30% {
          -webkit-transform: scaleX(.75) translateX(-125%);
          -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
        }
        90% {
          -webkit-transform: scaleX(.75) translateX(125%);
        }
        100% {
          -webkit-transform: scaleX(.75) translateX(125%);
        }
      }

      @keyframes indeterminate-bar {
        0% {
          transform: scaleX(1) translateX(-100%);
        }
        50% {
          transform: scaleX(1) translateX(0%);
        }
        75% {
          transform: scaleX(1) translateX(0%);
          animation-timing-function: cubic-bezier(.28,.62,.37,.91);
        }
        100% {
          transform: scaleX(0) translateX(0%);
        }
      }

      @keyframes indeterminate-splitter {
        0% {
          transform: scaleX(.75) translateX(-125%);
        }
        30% {
          transform: scaleX(.75) translateX(-125%);
          animation-timing-function: cubic-bezier(.42,0,.6,.8);
        }
        90% {
          transform: scaleX(.75) translateX(125%);
        }
        100% {
          transform: scaleX(.75) translateX(125%);
        }
      }
    </style>

    <div id="progressContainer">
      <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
      <div id="primaryProgress"></div>
    </div>
  </template>
</dom-module>







<dom-module id="paper-slider">
  <template strip-whitespace>
    <style>
      :host {
        @apply --layout;
        @apply --layout-justified;
        @apply --layout-center;
        width: 200px;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
        --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
        --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
        --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
        --calculated-paper-slider-height: var(--paper-slider-height, 2px);
      }

      /* focus shows the ripple */
      :host(:focus) {
        outline: none;
      }

      /**
       * NOTE(keanulee): Though :host-context is not universally supported, some pages
       * still rely on paper-slider being flipped when dir="rtl" is set on body. For full
       * compatability, dir="rtl" must be explicitly set on paper-slider.
       */
      :dir(rtl) #sliderContainer {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
      }

      /**
       * NOTE(keanulee): This is separate from the rule above because :host-context may
       * not be recognized.
       */
      :host([dir="rtl"]) #sliderContainer {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
      }

      /**
       * NOTE(keanulee): Needed to override the :host-context rule (where supported)
       * to support LTR sliders in RTL pages.
       */
      :host([dir="ltr"]) #sliderContainer {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
      }

      #sliderContainer {
        position: relative;
        width: 100%;
        height: calc(30px + var(--calculated-paper-slider-height));
        margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
        margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
      }

      #sliderContainer:focus {
        outline: 0;
      }

      #sliderContainer.editable {
        margin-top: 12px;
        margin-bottom: 12px;
      }

      .bar-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
      }

      .ring > .bar-container {
        left: calc(5px + var(--calculated-paper-slider-height)/2);
        transition: left 0.18s ease;
      }

      .ring.expand.dragging > .bar-container {
        transition: none;
      }

      .ring.expand:not(.pin) > .bar-container {
        left: calc(8px + var(--calculated-paper-slider-height)/2);
      }

      #sliderBar {
        padding: 15px 0;
        width: 100%;
        background-color: var(--paper-slider-bar-color, transparent);
        --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
        --paper-progress-height: var(--calculated-paper-slider-height);
      }

      .slider-markers {
        position: absolute;
        top: calc(14px + var(--paper-slider-height,2px)/2);
        height: var(--calculated-paper-slider-height);
        left: 0;
        right: -1px;
        box-sizing: border-box;
        pointer-events: none;
        @apply --layout-horizontal;
      }

      .slider-marker {
        @apply --layout-flex;
      }
      .slider-markers::after,
      .slider-marker::after {
        content: "";
        display: block;
        margin-left: -1px;
        width: 2px;
        height: var(--calculated-paper-slider-height);
        border-radius: 50%;
        background-color: var(--paper-slider-markers-color, #000);
      }

      .slider-knob {
        position: absolute;
        left: 0;
        top: 0;
        margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
        width: calc(30px + var(--calculated-paper-slider-height));
        height: calc(30px + var(--calculated-paper-slider-height));
      }

      .transiting > .slider-knob {
        transition: left 0.08s ease;
      }

      .slider-knob:focus {
        outline: none;
      }

      .slider-knob.dragging {
        transition: none;
      }

      .snaps > .slider-knob.dragging {
        transition: -webkit-transform 0.08s ease;
        transition: transform 0.08s ease;
      }

      .slider-knob-inner {
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background-color: var(--paper-slider-knob-color, var(--google-blue-700));
        border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
        border-radius: 50%;

        -moz-box-sizing: border-box;
        box-sizing: border-box;

        transition-property: -webkit-transform, background-color, border;
        transition-property: transform, background-color, border;
        transition-duration: 0.18s;
        transition-timing-function: ease;
      }

      .expand:not(.pin) > .slider-knob > .slider-knob-inner {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
      }

      .ring > .slider-knob > .slider-knob-inner {
        background-color: var(--paper-slider-knob-start-color, transparent);
        border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
      }

      .slider-knob-inner::before {
        background-color: var(--paper-slider-pin-color, var(--google-blue-700));
      }

      .pin > .slider-knob > .slider-knob-inner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -13px;
        width: 26px;
        height: 26px;
        border-radius: 50% 50% 50% 0;

        -webkit-transform: rotate(-45deg) scale(0) translate(0);
        transform: rotate(-45deg) scale(0) translate(0);
      }

      .slider-knob-inner::before,
      .slider-knob-inner::after {
        transition: -webkit-transform .18s ease, background-color .18s ease;
        transition: transform .18s ease, background-color .18s ease;
      }

      .pin.ring > .slider-knob > .slider-knob-inner::before {
        background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
      }

      .pin.expand > .slider-knob > .slider-knob-inner::before {
        -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
        transform: rotate(-45deg) scale(1) translate(17px, -17px);
      }

      .pin > .slider-knob > .slider-knob-inner::after {
        content: attr(value);
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -16px;
        width: 32px;
        height: 26px;
        text-align: center;
        color: var(--paper-slider-font-color, #fff);
        font-size: 10px;

        -webkit-transform: scale(0) translate(0);
        transform: scale(0) translate(0);
      }

      .pin.expand > .slider-knob > .slider-knob-inner::after {
        -webkit-transform: scale(1) translate(0, -17px);
        transform: scale(1) translate(0, -17px);
      }

      /* paper-input */
      .slider-input {
        width: 50px;
        overflow: hidden;
        --paper-input-container-input: {
          text-align: center;
          @apply --paper-slider-input-container-input;
        };
        @apply --paper-slider-input;
      }

      /* disabled state */
      #sliderContainer.disabled {
        pointer-events: none;
      }

      .disabled > .slider-knob > .slider-knob-inner {
        background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
        border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
        -webkit-transform: scale3d(0.75, 0.75, 1);
        transform: scale3d(0.75, 0.75, 1);
      }

      .disabled.ring > .slider-knob > .slider-knob-inner {
        background-color: var(--paper-slider-knob-start-color, transparent);
        border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
      }

      paper-ripple {
        color: var(--paper-slider-knob-color, var(--google-blue-700));
      }
    </style>

    <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
      <div class="bar-container">
        <paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_bartrack" on-tap="_barclick">
        </paper-progress>
      </div>

      <template is="dom-if" if="[[snaps]]">
        <div class="slider-markers">
          <template is="dom-repeat" items="[[markers]]">
            <div class="slider-marker"></div>
          </template>
        </div>
      </template>

      <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
          <div class="slider-knob-inner" value$="[[immediateValue]]"></div>
      </div>
    </div>

    <template is="dom-if" if="[[editable]]">
      <paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[[max]]" class="slider-input" disabled$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float>
      </paper-input>
    </template>
  </template>

  
</dom-module>





<dom-module id="tf-smoothing-input">
  <template>
    <h3 class="title">Smoothing</h3>
    <div class="smoothing-block">
      <paper-slider id="slider" immediate-value="{{_immediateWeightNumberForPaperSlider}}" max="[[max]]" min="[[min]]" pin step="[[step]]" type="number" value="{{weight}}"></paper-slider>
      <paper-input id="input" label="weight" no-label-float value="{{_inputWeightStringForPaperInput}}" type="number" step="[[step]]" min="[[min]]" max="[[max]]"></paper-input>
    </div>
    <style>
      .title {
        color: var(--paper-grey-800);
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        margin-bottom: 5px;
      }

      .smoothing-block {
        display: flex;
      }

      paper-slider {
        --paper-slider-active-color: var(--tb-orange-strong);
        --paper-slider-knob-color: var(--tb-orange-strong);
        --paper-slider-knob-start-border-color: var(--tb-orange-strong);
        --paper-slider-knob-start-color: var(--tb-orange-strong);
        --paper-slider-markers-color: var(--tb-orange-strong);
        --paper-slider-pin-color: var(--tb-orange-strong);
        --paper-slider-pin-start-color: var(--tb-orange-strong);
        flex-grow: 2;
      }

      paper-input {
        --paper-input-container-focus-color: var(--tb-orange-strong);
        --paper-input-container-input: {
          font-size: 14px;
        }
        --paper-input-container-label: {
          font-size: 14px;
        }
        width: 60px;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-scalar-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <div class="line-item">
            <paper-checkbox id="show-download-links" checked="{{_showDownloadLinks}}">Show data download links</paper-checkbox>
          </div>
          <div class="line-item">
            <paper-checkbox id="ignore-y-outlier" checked="{{_ignoreYOutliers}}">Ignore outliers in chart scaling</paper-checkbox>
          </div>
          <div id="tooltip-sorting">
            <div>Tooltip sorting method:</div>
            <paper-dropdown-menu no-label-float selected-item-label="{{_tooltipSortingMethod}}">
              <paper-listbox class="dropdown-content" selected="0" slot="dropdown-content">
                <paper-item>default</paper-item>
                <paper-item>descending</paper-item>
                <paper-item>ascending</paper-item>
                <paper-item>nearest</paper-item>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>
        </div>
        <div class="sidebar-section">
          <tf-smoothing-input weight="{{_smoothingWeight}}" step="0.001" min="0" max="0.999"></tf-smoothing-input>
        </div>
        <div class="sidebar-section">
          <tf-option-selector id="x-type-selector" name="Horizontal Axis" selected-id="{{_xType}}">
            <paper-button id="step">step</paper-button><paper-button id="relative">relative</paper-button><paper-button id="wall_time">wall</paper-button>
          </tf-option-selector>
        </div>
        <div class="sidebar-section">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>
      <div class="center" slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No scalar data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>You haven’t written any scalar data to your event files.</li>
              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]" get-category-item-key="[[_getCategoryItemKey]]">
              <template>
                <tf-scalar-card active="[[active]]" data-to-load="[[item.series]]" ignore-y-outliers="[[_ignoreYOutliers]]" multi-experiments="[[_getMultiExperiments(dataSelection)]]" request-manager="[[_requestManager]]" show-download-links="[[_showDownloadLinks]]" smoothing-enabled="[[_smoothingEnabled]]" smoothing-weight="[[_smoothingWeight]]" tag-metadata="[[_tagMetadata(category, _runToTagInfo, item)]]" tag="[[item.tag]]" tooltip-sorting-method="[[_tooltipSortingMethod]]" x-type="[[_xType]]"></tf-scalar-card>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      #tooltip-sorting {
        align-items: center;
        display: flex;
        font-size: 14px;
        margin-top: 15px;
      }
      #tooltip-sorting paper-dropdown-menu {
        margin-left: 10px;
        --paper-input-container-focus-color: var(--tb-orange-strong);
        width: 105px;
      }
      .line-item {
        display: block;
        padding-top: 5px;
      }
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
      .center {
        overflow-x: hidden;
      }
    </style>
  </template>

  
</dom-module>
































<dom-module id="tf-custom-scalar-card-style">
  <template>
    <style>
      :host {
        margin: 5px 10px;
        display: inline-block;
        width: 330px;
        vertical-align: text-top;
      }

      :host([_expanded]) {
        width: 100%;
      }

      :host([_expanded]) #tf-line-chart-data-loader-container {
        height: 400px;
      }

      h1 {
        font-size: 19px;
        font-weight: normal;
      }

      #tf-line-chart-data-loader-container {
        height: 200px;
        width: 100%;
      }

      #buttons {
        display: flex;
        flex-direction: row;
      }

      paper-icon-button {
        color: #2196f3;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        padding: 4px;
      }

      paper-icon-button[selected] {
        background: var(--tb-ui-light-accent);
      }

      .download-links {
        display: flex;
        height: 32px;
      }

      .download-links a {
        font-size: 10px;
        align-self: center;
        margin: 2px;
      }

      .download-links paper-dropdown-menu {
        width: 100px;
        --paper-input-container-label: {
          font-size: 10px;
        }
        --paper-input-container-input: {
          font-size: 10px;
        }
      }
    </style>
  </template>
</dom-module>





<dom-module id="tf-custom-scalar-margin-chart-card">
  <template>
    <tf-card-heading display-name="[[_titleDisplayString]]"></tf-card-heading>
    <div id="tf-line-chart-data-loader-container">
      <tf-line-chart-data-loader id="loader" active="[[active]]" color-scale="[[_colorScale]]" data-series="[[_seriesNames]]" get-data-load-url="[[_dataUrl]]" fill-area="[[_fillArea]]" ignore-y-outliers="[[ignoreYOutliers]]" load-key="[[_tagFilter]]" data-to-load="[[runs]]" log-scale-active="[[_logScaleActive]]" load-data-callback="[[_createProcessDataFunction(marginChartSeries)]]" request-manager="[[requestManager]]" symbol-function="[[_createSymbolFunction()]]" tooltip-columns="[[_tooltipColumns]]" tooltip-sorting-method="[[tooltipSortingMethod]]" x-type="[[xType]]">
      </tf-line-chart-data-loader>
    </div>
    <div id="buttons">
      <paper-icon-button selected$="[[_expanded]]" icon="fullscreen" on-tap="_toggleExpanded"></paper-icon-button>
      <paper-icon-button selected$="[[_logScaleActive]]" icon="line-weight" on-tap="_toggleLogScale" title="Toggle y-axis log scale"></paper-icon-button>
      <paper-icon-button icon="settings-overscan" on-tap="_resetDomain" title="Fit domain to data"></paper-icon-button>
      <span style="flex-grow: 1"></span>
      <template is="dom-if" if="[[showDownloadLinks]]">
        <div class="download-links">
          <paper-dropdown-menu no-label-float="true" label="series to download" selected-item-label="{{_dataSeriesNameToDownload}}">
            <paper-listbox class="dropdown-content" slot="dropdown-content">
              <template is="dom-repeat" items="[[_seriesNames]]" as="dataSeriesName">
                <paper-item no-label-float="true">[[dataSeriesName]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          <a download="[[_dataSeriesNameToDownload]].csv" href="[[_csvUrl(_nameToDataSeries, _dataSeriesNameToDownload)]]">CSV</a>
          <a download="[[_dataSeriesNameToDownload]].json" href="[[_jsonUrl(_nameToDataSeries, _dataSeriesNameToDownload)]]">JSON</a>
        </div>
      </template>
    </div>

    
    <template is="dom-if" if="[[_missingTags.length]]">
      <div class="collapsible-list-title">
        <paper-icon-button icon="[[_getToggleCollapsibleIcon(_missingTagsCollapsibleOpened)]]" on-click="_toggleMissingTagsCollapsibleOpen" class="toggle-collapsible-button">
        </paper-icon-button>
        <span class="collapsible-title-text">
          <iron-icon icon="icons:error"></iron-icon> Missing Tags
        </span>
      </div>
      <iron-collapse opened="[[_missingTagsCollapsibleOpened]]">
        <div class="error-content">
          <iron-icon class="error-icon" icon="icons:error"></iron-icon>
          <template is="dom-repeat" items="[[_missingTags]]" as="missingEntry">
            <div class="missing-tags-for-run-container">
              Run "[[missingEntry.run]]" lacks data for tags
              <ul>
                <template is="dom-repeat" items="[[missingEntry.tags]]" as="tag">
                  <li>[[tag]]</li>
                </template>
              </ul>
            </div>
          </template>
        </div>
      </iron-collapse>
    </template>

    <template is="dom-if" if="[[_tagFilterInvalid]]">
      <div class="error-content">
        <iron-icon class="error-icon" icon="icons:error"></iron-icon>
        This regular expresion is invalid:<br>
        <span class="invalid-regex">[[_tagFilter]]</span>
      </div>
    </template>

    <template is="dom-if" if="[[_stepsMismatch]]">
      <div class="error-content">
        <iron-icon class="error-icon" icon="icons:error"></iron-icon>
        The steps for value, lower, and upper tags do not match:
        <ul>
          <li>
            <span class="tag-name">[[_stepsMismatch.seriesObject.value]]</span>:
            [[_separateWithCommas(_stepsMismatch.valueSteps)]]
          </li>
          <li>
            <span class="tag-name">[[_stepsMismatch.seriesObject.lower]]</span>:
            [[_separateWithCommas(_stepsMismatch.lowerSteps)]]
          </li>
          <li>
            <span class="tag-name">[[_stepsMismatch.seriesObject.upper]]</span>:
            [[_separateWithCommas(_stepsMismatch.upperSteps)]]
          </li>
        </ul>
      </div>
    </template>

    <div id="matches-container">
      <div class="collapsible-list-title">
        <template is="dom-if" if="[[_seriesNames.length]]">
          <paper-icon-button icon="[[_getToggleCollapsibleIcon(_matchesListOpened)]]" on-click="_toggleMatchesOpen" class="toggle-matches-button">
          </paper-icon-button>
        </template>

        <span class="collapsible-title-text">
          Matches ([[_seriesNames.length]])
        </span>
      </div>
      <template is="dom-if" if="[[_seriesNames.length]]">
        <iron-collapse opened="[[_matchesListOpened]]">
          <div id="matches-list">
            <template is="dom-repeat" items="[[_seriesNames]]" as="seriesName" id="match-list-repeat" on-dom-change="_matchListEntryColorUpdated">
              <div class="match-list-entry">
                <span class="match-entry-symbol">
                  [[_determineSymbol(_nameToDataSeries, seriesName)]]
                </span>
                [[seriesName]]
              </div>
            </template>
          </div>
        </iron-collapse>
      </template>
    </div>

    <style include="tf-custom-scalar-card-style"></style>
    <style>
      .error-content {
        background: #f00;
        border-radius: 5px;
        color: #fff;
        margin: 10px 0 0 0;
        padding: 10px;
      }

      .error-icon {
        display: block;
        fill: #fff;
        margin: 0 auto 5px auto;
      }

      .invalid-regex {
        font-weight: bold;
      }

      .error-content ul {
        margin: 1px 0 0 0;
        padding: 0 0 0 19px;
      }

      .tag-name {
        font-weight: bold;
      }

      .collapsible-list-title {
        margin: 10px 0 5px 0;
      }

      .collapsible-title-text {
        vertical-align: middle;
      }

      #matches-list {
        max-height: 200px;
        overflow-y: auto;
      }

      .match-list-entry {
        margin: 0 0 5px 0;
      }

      .match-entry-symbol {
        font-family: arial, sans-serif;
        display: inline-block;
        width: 10px;
      }

      .missing-tags-for-run-container {
        margin: 8px 0 0 0;
      }
    </style>
  </template>
  
</dom-module>


















<dom-module id="tf-custom-scalar-multi-line-chart-card">
  <template>
    <tf-card-heading display-name="[[_titleDisplayString]]"></tf-card-heading>
    <div id="tf-line-chart-data-loader-container">
      <tf-line-chart-data-loader id="loader" active="[[active]]" color-scale="[[_colorScale]]" data-series="[[_seriesNames]]" get-data-load-url="[[_dataUrl]]" ignore-y-outliers="[[ignoreYOutliers]]" load-key="[[_tagFilter]]" data-to-load="[[runs]]" log-scale-active="[[_logScaleActive]]" load-data-callback="[[_createProcessDataFunction()]]" request-manager="[[requestManager]]" smoothing-enabled="[[smoothingEnabled]]" smoothing-weight="[[smoothingWeight]]" symbol-function="[[_createSymbolFunction()]]" tooltip-sorting-method="[[tooltipSortingMethod]]" x-type="[[xType]]">
      </tf-line-chart-data-loader>
    </div>
    <div id="buttons">
      <paper-icon-button selected$="[[_expanded]]" icon="fullscreen" on-tap="_toggleExpanded"></paper-icon-button>
      <paper-icon-button selected$="[[_logScaleActive]]" icon="line-weight" on-tap="_toggleLogScale" title="Toggle y-axis log scale"></paper-icon-button>
      <paper-icon-button icon="settings-overscan" on-tap="_resetDomain" title="Fit domain to data"></paper-icon-button>
      <span style="flex-grow: 1"></span>
      <template is="dom-if" if="[[showDownloadLinks]]">
        <div class="download-links">
          <paper-dropdown-menu no-label-float="true" label="series to download" selected-item-label="{{_dataSeriesNameToDownload}}">
            <paper-listbox class="dropdown-content" slot="dropdown-content">
              <template is="dom-repeat" items="[[_seriesNames]]" as="dataSeriesName">
                <paper-item no-label-float="true">[[dataSeriesName]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          <a download="[[_dataSeriesNameToDownload]].csv" href="[[_csvUrl(_nameToDataSeries, _dataSeriesNameToDownload)]]">CSV</a>
          <a download="[[_dataSeriesNameToDownload]].json" href="[[_jsonUrl(_nameToDataSeries, _dataSeriesNameToDownload)]]">JSON</a>
        </div>
      </template>
    </div>
    <div id="matches-container">
      <div id="matches-list-title">
        <template is="dom-if" if="[[_seriesNames.length]]">
          <paper-icon-button icon="[[_getToggleMatchesIcon(_matchesListOpened)]]" on-click="_toggleMatchesOpen" class="toggle-matches-button">
          </paper-icon-button>
        </template>

        <span class="matches-text">
          Matches ([[_seriesNames.length]])
        </span>
      </div>
      <template is="dom-if" if="[[_seriesNames.length]]">
        <iron-collapse opened="[[_matchesListOpened]]">
          <div id="matches-list">
            <template is="dom-repeat" items="[[_seriesNames]]" as="seriesName" id="match-list-repeat" on-dom-change="_matchListEntryColorUpdated">
              <div class="match-list-entry">
                <span class="match-entry-symbol">
                  [[_determineSymbol(_nameToDataSeries, seriesName)]]
                </span>
                [[seriesName]]
              </div>
            </template>
          </div>
        </iron-collapse>
      </template>
    </div>

    <style include="tf-custom-scalar-card-style"></style>
    <style>
      #matches-list-title {
        margin: 10px 0 5px 0;
      }

      #matches-list {
        max-height: 200px;
        overflow-y: auto;
      }

      .match-list-entry {
        margin: 0 0 5px 0;
      }

      .match-entry-symbol {
        font-family: arial, sans-serif;
        display: inline-block;
        width: 10px;
      }

      .matches-text {
        vertical-align: middle;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-custom-scalar-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <div class="line-item">
            <paper-checkbox checked="{{_showDownloadLinks}}">Show data download links</paper-checkbox>
          </div>
          <div class="line-item">
            <paper-checkbox checked="{{_ignoreYOutliers}}">Ignore outliers in chart scaling</paper-checkbox>
          </div>
          <div id="tooltip-sorting">
            <div id="tooltip-sorting-label">Tooltip sorting method:</div>
            <paper-dropdown-menu no-label-float selected-item-label="{{_tooltipSortingMethod}}">
              <paper-listbox class="dropdown-content" selected="0" slot="dropdown-content">
                <paper-item>default</paper-item>
                <paper-item>descending</paper-item>
                <paper-item>ascending</paper-item>
                <paper-item>nearest</paper-item>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>
        </div>
        <div class="sidebar-section">
          <tf-smoothing-input weight="{{_smoothingWeight}}" step="0.001" min="0" max="1"></tf-smoothing-input>
        </div>
        <div class="sidebar-section">
          <tf-option-selector id="x-type-selector" name="Horizontal Axis" selected-id="{{_xType}}">
            <paper-button id="step">step</paper-button><paper-button id="relative">relative</paper-button><paper-button id="wall_time">wall</paper-button>
          </tf-option-selector>
        </div>
        <div class="sidebar-section">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>
      <div class="center" slot="center" id="categories-container">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>The custom scalars dashboard is inactive.</h3>
            <p>Probable causes:
            <ol>
              <li>You haven't laid out the dashboard.</li>
              <li>You haven’t written any scalar data to your event files.</li>
            </ol>

            <p>
              To lay out the dashboard, pass a <code>Layout</code> protobuffer
              to the <code>set_layout</code> method. For example,
            
            <pre>from tensorboard import summary
from tensorboard.plugins.custom_scalar import layout_pb2
...
# This action does not have to be performed at every step, so the action is not
# taken care of by an op in the graph. We only need to specify the layout once
# (instead of per step).
layout_summary = summary_lib.custom_scalar_pb(layout_pb2.Layout(
  category=[
    layout_pb2.Category(
      title='losses',
      chart=[
          layout_pb2.Chart(
              title='losses',
              multiline=layout_pb2.MultilineChartContent(
                tag=[r'loss.*'],
              )),
          layout_pb2.Chart(
              title='baz',
              margin=layout_pb2.MarginChartContent(
                series=[
                  layout_pb2.MarginChartContent.Series(
                    value='loss/baz/scalar_summary',
                    lower='baz_lower/baz/scalar_summary',
                    upper='baz_upper/baz/scalar_summary'),
                ],
              )),
      ]),
    layout_pb2.Category(
      title='trig functions',
      chart=[
          layout_pb2.Chart(
              title='wave trig functions',
              multiline=layout_pb2.MultilineChartContent(
                tag=[r'trigFunctions/cosine', r'trigFunctions/sine'],
              )),
          # The range of tangent is different. Let's give it its own chart.
          layout_pb2.Chart(
              title='tan',
              multiline=layout_pb2.MultilineChartContent(
                tag=[r'trigFunctions/tangent'],
              )),
      ],
      # This category we care less about. Let's make it initially closed.
      closed=True),
  ]))
writer.add_summary(layout_summary)
</pre>
            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view as="chart" category="[[category]]" disable-pagination initial-opened="[[category.metadata.opened]]">
              <template>
                <div>
                  <template is="dom-if" if="[[chart.multiline]]">
                    <tf-custom-scalar-multi-line-chart-card active="[[active]]" request-manager="[[_requestManager]]" runs="[[_selectedRuns]]" title="[[chart.title]]" x-type="[[_xType]]" smoothing-enabled="[[_smoothingEnabled]]" smoothing-weight="[[_smoothingWeight]]" tooltip-sorting-method="[[tooltipSortingMethod]]" ignore-y-outliers="[[_ignoreYOutliers]]" show-download-links="[[_showDownloadLinks]]" tag-regexes="[[chart.multiline.tag]]"></tf-custom-scalar-multi-line-chart-card>
                  </template>
                  <template is="dom-if" if="[[chart.margin]]">
                    <tf-custom-scalar-margin-chart-card active="[[active]]" request-manager="[[_requestManager]]" runs="[[_selectedRuns]]" title="[[chart.title]]" x-type="[[_xType]]" tooltip-sorting-method="[[tooltipSortingMethod]]" ignore-y-outliers="[[_ignoreYOutliers]]" show-download-links="[[_showDownloadLinks]]" margin-chart-series="[[chart.margin.series]]"></tf-custom-scalar-margin-chart-card>
                  </template>
                </div>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      #tooltip-sorting {
        align-items: center;
        display: flex;
        font-size: 14px;
        margin-top: 15px;
      }
      #tooltip-sorting paper-dropdown-menu {
        margin-left: 10px;
        --paper-input-container-focus-color: var(--tb-orange-strong);
        width: 105px;
      }
      .line-item {
        display: block;
        padding-top: 5px;
      }
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
    </style>
  </template>

  
</dom-module>





























<dom-module id="tf-image-loader">
  <template>
    <tf-card-heading tag="[[tag]]" run="[[run]]" display-name="[[tagMetadata.displayName]]" description="[[tagMetadata.description]]" color="[[_runColor]]">
      <template is="dom-if" if="[[_hasMultipleSamples]]">
        <div>sample: [[_sampleText]] of [[ofSamples]]</div>
      </template>
      <template is="dom-if" if="[[_hasAtLeastOneStep]]">
        <div class="heading-row">
          <div class="heading-label">
            step
            <span style="font-weight: bold">[[_toLocaleString(_stepValue)]]</span>
          </div>
          <div class="heading-label heading-right datetime">
            <template is="dom-if" if="[[_currentWallTime]]">
              [[_currentWallTime]]
            </template>
          </div>
          <div class="label right">
            <paper-spinner-lite active hidden$="[[!_isImageLoading]]">
            </paper-spinner-lite>
          </div>
        </div>
      </template>
      <template is="dom-if" if="[[_hasMultipleSteps]]">
        <div>
          <paper-slider id="steps" immediate-value="{{_stepIndex}}" max="[[_maxStepIndex]]" max-markers="[[_maxStepIndex]]" snaps step="1" value="{{_stepIndex}}"></paper-slider>
        </div>
      </template>
    </tf-card-heading>

    
    <a id="main-image-container" role="button" aria-label="Toggle actual size" aria-expanded$="[[_getAriaExpanded(actualSize)]]" on-tap="_handleTap"></a>

    <style include="tf-card-heading-style">
      /** Make button a div. */
      button {
        width: 100%;
        display: block;
        background: none;
        border: 0;
        padding: 0;
      }

      /** Firefox: Get rid of dotted line inside button. */
      button::-moz-focus-inner {
        border: 0;
        padding: 0;
      }

      /** Firefox: Simulate Chrome's outer glow on button when focused. */
      button:-moz-focusring {
        outline: none;
        box-shadow: 0px 0px 1px 2px Highlight;
      }

      :host {
        display: block;
        width: 350px;
        height: auto;
        position: relative;
        margin: 0 15px 40px 0;
        overflow-x: auto;
      }

      /** When actual size shown is on, use the actual image width. */
      :host([actual-size]) {
        max-width: 100%;
        width: auto;
      }

      :host([actual-size]) #main-image-container {
        max-height: none;
        width: auto;
      }

      :host([actual-size]) #main-image-container img {
        width: auto;
      }

      paper-spinner-lite {
        width: 14px;
        height: 14px;
        vertical-align: text-bottom;
        --paper-spinner-color: var(--tb-orange-strong);
      }

      #steps {
        height: 15px;
        margin: 0 0 0 -15px;
        /*
         * 31 comes from adding a padding of 15px from both sides of the
         * paper-slider, subtracting 1px so that the slider width aligns
         * with the image (the last slider marker takes up 1px), and
         * adding 2px to account for a border of 1px on both sides of
         * the image. 30 - 1 + 2.
         */
        width: calc(100% + 31px);
        --paper-slider-active-color: var(--tb-orange-strong);
        --paper-slider-knob-color: var(--tb-orange-strong);
        --paper-slider-knob-start-border-color: var(--tb-orange-strong);
        --paper-slider-knob-start-color: var(--tb-orange-strong);
        --paper-slider-markers-color: var(--tb-orange-strong);
        --paper-slider-pin-color: var(--tb-orange-strong);
        --paper-slider-pin-start-color: var(--tb-orange-strong);
      }

      #main-image-container {
        max-height: 1024px;
        overflow: auto;
      }

      #main-image-container img {
        cursor: pointer;
        display: block;
        image-rendering: -moz-crisp-edges;
        image-rendering: pixelated;
        width: 100%;
        height: auto;
      }

      paper-icon-button {
        color: #2196f3;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        padding: 4px;
      }
      paper-icon-button[selected] {
        background: var(--tb-ui-light-accent);
      }
      [hidden] {
        display: none;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-image-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <div class="line-item">
            <paper-checkbox checked="{{_actualSize}}">Show actual image size</paper-checkbox>
          </div>
        </div>
        <div class="sidebar-section">
          <h3 class="tooltip-container">Brightness adjustment</h3>
          <div class="resettable-slider-container">
            <paper-slider min="0" max="2" snaps pin step="0.01" value="{{_brightnessAdjustment}}" immediate-value="{{_brightnessAdjustment}}"></paper-slider>
            <paper-button class="x-button" on-tap="_resetBrightness" disabled="[[_brightnessIsDefault]]">Reset</paper-button>
          </div>
        </div>
        <div class="sidebar-section">
          <h3 class="tooltip-container">Contrast adjustment</h3>
          <div class="resettable-slider-container">
            <paper-slider min="0" max="500" snaps pin step="1" value="{{_contrastPercentage}}" immediate-value="{{_contrastPercentage}}"></paper-slider>
            <paper-button class="x-button" on-tap="_resetContrast" disabled="[[_contrastIsDefault]]">Reset</paper-button>
          </div>
        </div>
        <div class="sidebar-section">
          <tf-runs-selector id="runs-selector" selected-runs="{{_selectedRuns}}"></tf-runs-selector>
        </div>
      </div>
      <div class="center" slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No image data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>You haven’t written any image data to your event files.</li>
              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]">
              <template>
                <tf-image-loader active="[[active]]" run="[[item.run]]" tag="[[item.tag]]" sample="[[item.sample]]" of-samples="[[item.ofSamples]]" tag-metadata="[[_tagMetadata(_runToTagInfo, item.run, item.tag)]]" request-manager="[[_requestManager]]" actual-size="[[_actualSize]]" brightness-adjustment="[[_brightnessAdjustment]]" contrast-percentage="[[_contrastPercentage]]"></tf-image-loader>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>
    <style include="dashboard-style"></style>
    <style>
      .resettable-slider-container {
        display: flex;
      }
      .resettable-slider-container paper-slider {
        flex-grow: 1;
      }
      .resettable-slider-container paper-button {
        flex-grow: 0;
      }
      .resettable-slider-container paper-button[disabled] {
        background-color: unset;
      }
      .x-button {
        font-size: 13px;
        background-color: var(--tb-ui-light-accent);
        color: var(--tb-ui-dark-accent);
      }
      h3 {
        color: var(--paper-grey-800);
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        margin-bottom: 5px;
        display: block;
        pointer-events: none;
      }
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
      paper-slider {
        --paper-slider-active-color: var(--tb-orange-strong);
        --paper-slider-knob-color: var(--tb-orange-strong);
        --paper-slider-knob-start-border-color: var(--tb-orange-strong);
        --paper-slider-knob-start-color: var(--tb-orange-strong);
        --paper-slider-markers-color: var(--tb-orange-strong);
        --paper-slider-pin-color: var(--tb-orange-strong);
        --paper-slider-pin-start-color: var(--tb-orange-strong);
      }
    </style>
  </template>
  
</dom-module>























<dom-module id="tf-audio-loader">
  <template>
    <tf-card-heading tag="[[tag]]" run="[[run]]" display-name="[[tagMetadata.displayName]]" description="[[tagMetadata.description]]" color="[[_runColor]]">
      <template is="dom-if" if="[[_hasMultipleSamples]]">
        <div class="heading-row">
          <div class="heading-label">
            sample: [[_sampleText]] of [[totalSamples]]
          </div>
        </div>
      </template>
      <template is="dom-if" if="[[_hasAtLeastOneStep]]">
        <div class="heading-row">
          <div class="heading-label">
            step <strong>[[_currentDatum.step]]</strong>
          </div>
          <template is="dom-if" if="[[_currentDatum.wall_time]]">
            <div class="heading-label heading-right">
              [[_currentDatum.wall_time]]
            </div>
          </template>
        </div>
      </template>
      <template is="dom-if" if="[[_hasMultipleSteps]]">
        <div class="heading-row">
          <paper-slider id="steps" immediate-value="{{_stepIndex}}" max="[[_maxStepIndex]]" max-markers="[[_maxStepIndex]]" snaps step="1" value="{{_stepIndex}}"></paper-slider>
        </div>
      </template>
    </tf-card-heading>
    <template is="dom-if" if="[[_hasAtLeastOneStep]]">
      <audio controls src$="[[_currentDatum.url]]" type$="[[_currentDatum.contentType]]"></audio>
      <tf-markdown-view html="[[_currentDatum.label]]"></tf-markdown-view>
    </template>
    <div id="main-audio-container"></div>

    <style include="tf-card-heading-style">
      :host {
        display: block;
        width: 350px;
        height: auto;
        position: relative;
        --step-slider-knob-color: #424242;
        margin-right: 15px;
        margin-bottom: 15px;
      }

      #steps {
        height: 15px;
        margin: 0 0 0 -15px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 5px; /* so the slider knob doesn't butt out */
        margin-top: 5px;
        --paper-slider-active-color: var(--step-slider-knob-color);
        --paper-slider-knob-color: var(--step-slider-knob-color);
        --paper-slider-pin-color: var(--step-slider-knob-color);
        --paper-slider-knob-start-color: var(--step-slider-knob-color);
        --paper-slider-knob-start-border-color: var(--step-slider-knob-color);
        --paper-slider-pin-start-color: var(--step-slider-knob-color);
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-audio-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <tf-runs-selector id="runs-selector" selected-runs="{{_selectedRuns}}"></tf-runs-selector>
        </div>
      </div>
      <div class="center" slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No audio data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>You haven’t written any audio data to your event files.</li>
              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]">
              <template>
                <tf-audio-loader active="[[active]]" run="[[item.run]]" tag="[[item.tag]]" sample="[[item.sample]]" total-samples="[[item.totalSamples]]" tag-metadata="[[_tagMetadata(_runToTagInfo, item.run, item.tag)]]" request-manager="[[_requestManager]]"></tf-audio-loader>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>
    <style include="dashboard-style"></style>
    <style>
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
    </style>
  </template>
  
</dom-module>













<dom-module id="iron-autogrow-textarea">
  <template>
    <style>
      :host {
        display: inline-block;
        position: relative;
        width: 400px;
        border: 1px solid;
        padding: 2px;
        -moz-appearance: textarea;
        -webkit-appearance: textarea;
        overflow: hidden;
      }

      .mirror-text {
        visibility: hidden;
        word-wrap: break-word;
        @apply --iron-autogrow-textarea;
      }

      .fit {
        @apply --layout-fit;
      }

      textarea {
        position: relative;
        outline: none;
        border: none;
        resize: none;
        background: inherit;
        color: inherit;
        /* see comments in template */
        width: 100%;
        height: 100%;
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        text-align: inherit;
        @apply --iron-autogrow-textarea;
      }

      textarea::-webkit-input-placeholder {
        @apply --iron-autogrow-textarea-placeholder;
      }

      textarea:-moz-placeholder {
        @apply --iron-autogrow-textarea-placeholder;
      }

      textarea::-moz-placeholder {
        @apply --iron-autogrow-textarea-placeholder;
      }

      textarea:-ms-input-placeholder {
        @apply --iron-autogrow-textarea-placeholder;
      }
    </style>

    
    
    <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>

    
    <div class="textarea-container fit">
      <textarea id="textarea" name$="[[name]]" aria-label$="[[label]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" disabled$="[[disabled]]" rows$="[[rows]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]"></textarea>
    </div>
  </template>
</dom-module>











<dom-module id="paper-textarea">
  <template>
    <style>
      :host {
        display: block;
      }

      :host([hidden]) {
        display: none !important;
      }

      label {
        pointer-events: none;
      }
    </style>

    <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">

      <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>

      <iron-autogrow-textarea class="paper-input-input" slot="input" id$="[[_inputId]]" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" bind-value="{{value}}" invalid="{{invalid}}" validator$="[[validator]]" disabled$="[[disabled]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]" on-change="_onChange"></iron-autogrow-textarea>

      <template is="dom-if" if="[[errorMessage]]">
        <paper-input-error aria-live="assertive" slot="add-on">[[errorMessage]]</paper-input-error>
      </template>

      <template is="dom-if" if="[[charCounter]]">
        <paper-input-char-counter slot="add-on"></paper-input-char-counter>
      </template>

    </paper-input-container>
  </template>
</dom-module>













<dom-module id="paper-toast">
  <template>
    <style>
      :host {
        display: block;
        position: fixed;
        background-color: var(--paper-toast-background-color, #323232);
        color: var(--paper-toast-color, #f1f1f1);
        min-height: 48px;
        min-width: 288px;
        padding: 16px 24px;
        box-sizing: border-box;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 2px;
        margin: 12px;
        font-size: 14px;
        cursor: default;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        @apply --paper-font-common-base;
      }

      :host(.capsule) {
        border-radius: 24px;
      }

      :host(.fit-bottom) {
        width: 100%;
        min-width: 0;
        border-radius: 0;
        margin: 0;
      }

      :host(.paper-toast-open) {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
      }
    </style>

    <span id="label">{{text}}</span>
    <slot></slot>
  </template>

  
</dom-module>

















<dom-module id="paper-toggle-button">
  <template strip-whitespace>

    <style>
      :host {
        display: inline-block;
        @apply --layout-horizontal;
        @apply --layout-center;
        @apply --paper-font-common-base;
      }

      :host([disabled]) {
        pointer-events: none;
      }

      :host(:focus) {
        outline:none;
      }

      .toggle-bar {
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 8px;
        pointer-events: none;
        opacity: 0.4;
        transition: background-color linear .08s;
        background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);

        @apply --paper-toggle-button-unchecked-bar;
      }

      .toggle-button {
        position: absolute;
        top: -3px;
        left: 0;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
        transition: -webkit-transform linear .08s, background-color linear .08s;
        transition: transform linear .08s, background-color linear .08s;
        will-change: transform;
        background-color: var(--paper-toggle-button-unchecked-button-color, var(--paper-grey-50));

        @apply --paper-toggle-button-unchecked-button;
      }

      .toggle-button.dragging {
        -webkit-transition: none;
        transition: none;
      }

      :host([checked]:not([disabled])) .toggle-bar {
        opacity: 0.5;
        background-color: var(--paper-toggle-button-checked-bar-color, var(--primary-color));

        @apply --paper-toggle-button-checked-bar;
      }

      :host([disabled]) .toggle-bar {
        background-color: #000;
        opacity: 0.12;
      }

      :host([checked]) .toggle-button {
        -webkit-transform: translate(16px, 0);
        transform: translate(16px, 0);
      }

      :host([checked]:not([disabled])) .toggle-button {
        background-color: var(--paper-toggle-button-checked-button-color, var(--primary-color));

        @apply --paper-toggle-button-checked-button;
      }

      :host([disabled]) .toggle-button {
        background-color: #bdbdbd;
        opacity: 1;
      }

      .toggle-ink {
        position: absolute;
        top: -14px;
        left: -14px;
        right: auto;
        bottom: auto;
        width: 48px;
        height: 48px;
        opacity: 0.5;
        pointer-events: none;
        color: var(--paper-toggle-button-unchecked-ink-color, var(--primary-text-color));

        @apply --paper-toggle-button-unchecked-ink;
      }

      :host([checked]) .toggle-ink {
        color: var(--paper-toggle-button-checked-ink-color, var(--primary-color));

        @apply --paper-toggle-button-checked-ink;
      }

      .toggle-container {
        display: inline-block;
        position: relative;
        width: 36px;
        height: 14px;
        /* The toggle button has an absolute position of -3px; The extra 1px
        /* accounts for the toggle button shadow box. */
        margin: 4px 1px;
      }

      .toggle-label {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        padding-left: var(--paper-toggle-button-label-spacing, 8px);
        pointer-events: none;
        color: var(--paper-toggle-button-label-color, var(--primary-text-color));
      }

      /* invalid state */
      :host([invalid]) .toggle-bar {
        background-color: var(--paper-toggle-button-invalid-bar-color, var(--error-color));
      }

      :host([invalid]) .toggle-button {
        background-color: var(--paper-toggle-button-invalid-button-color, var(--error-color));
      }

      :host([invalid]) .toggle-ink {
        color: var(--paper-toggle-button-invalid-ink-color, var(--error-color));
      }
    </style>

    <div class="toggle-container">
      <div id="toggleBar" class="toggle-bar"></div>
      <div id="toggleButton" class="toggle-button"></div>
    </div>

    <div class="toggle-label"><slot></slot></div>

  </template>

  
</dom-module>








































<dom-module id="tf-graph-minimap">
  <template>
    <style>
      :host {
        background-color: white;
        transition: opacity 0.3s linear;
        pointer-events: auto;
      }

      :host(.hidden) {
        opacity: 0;
        pointer-events: none;
      }

      canvas {
        border: 1px solid #999;
      }

      rect {
        fill: white;
        stroke: #111111;
        stroke-width: 1px;
        fill-opacity: 0;
        filter: url(#minimapDropShadow);
        cursor: move;
      }

      svg {
        position: absolute;
      }
    </style>
    <svg>
      <defs>
        <filter id="minimapDropShadow" x="-20%" y="-20%" width="150%" height="150%">
          <feoffset result="offOut" in="SourceGraphic" dx="1" dy="1"></feoffset>
          <fecolormatrix result="matrixOut" in="offOut" type="matrix" values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0"></fecolormatrix>
          <fegaussianblur result="blurOut" in="matrixOut" stddeviation="2"></fegaussianblur>
          <feblend in="SourceGraphic" in2="blurOut" mode="normal"></feblend>
        </filter>
      </defs>
      <rect></rect>
    </svg>
    <canvas class="first"></canvas>
    
    <canvas class="second"></canvas>
    <canvas class="download"></canvas>
  </template>
  
</dom-module>



<dom-module id="tf-graph-scene">
  <template>
    <style>
      :host {
        display: flex;
        font-size: 20px;
        height: 100%;
        width: 100%;
      }

      #svg {
        flex: 1;
        font-family: Roboto, sans-serif;
        height: 100%;
        overflow: hidden;
        width: 100%;
      }

      #hidden {
        position: fixed;
        top: 0px;
        visibility: hidden;
      }

      /* --- Node and annotation-node for Metanode --- */

      .meta > .nodeshape > rect,
      .meta > .annotation-node > rect {
        cursor: pointer;
        fill: hsl(0, 0%, 70%);
      }
      .node.meta.highlighted > .nodeshape > rect,
      .node.meta.highlighted > .annotation-node > rect {
        stroke-width: 2;
      }
      .annotation.meta.highlighted > .nodeshape > rect,
      .annotation.meta.highlighted > .annotation-node > rect {
        stroke-width: 1;
      }
      .meta.selected > .nodeshape > rect,
      .meta.selected > .annotation-node > rect {
        stroke: red;
        stroke-width: 2;
      }
      .node.meta.selected.expanded > .nodeshape > rect,
      .node.meta.selected.expanded > .annotation-node > rect {
        stroke: red;
        stroke-width: 3;
      }
      .annotation.meta.selected > .nodeshape > rect,
      .annotation.meta.selected > .annotation-node > rect {
        stroke: red;
        stroke-width: 2;
      }
      .node.meta.selected.expanded.highlighted > .nodeshape > rect,
      .node.meta.selected.expanded.highlighted > .annotation-node > rect {
        stroke: red;
        stroke-width: 4;
      }

      .faded,
      .faded rect,
      .faded ellipse,
      .faded path,
      .faded use,
      #rectHatch line,
      #ellipseHatch line {
        color: #e0d4b3 !important;
        fill: white;
        stroke: #e0d4b3 !important;
      }

      .faded path {
        stroke-width: 1px !important;
      }

      .faded rect {
        fill: url(#rectHatch) !important;
      }

      .faded ellipse,
      .faded use {
        fill: url(#ellipseHatch) !important;
      }

      .faded text {
        opacity: 0;
      }

      /* Rules used for input-tracing. */
      .input-highlight > * > rect,
      .input-highlight > * > ellipse,
      .input-highlight > * > use {
        fill: white;
        stroke: #ff9800 !important;
      }

      /*  - Faded non-input styling */
      .non-input > * > rect,
.non-input > * > ellipse,
.non-input > * > use,
/* For Const nodes. */
.non-input > * > .constant:not([class*="input-highlight"]) >
  .annotation-node > ellipse,
/* For styling of annotation nodes of non-input nodes. */
.non-input > g > .annotation > .annotation-node > rect {
        stroke: #e0d4b3 !important;
        stroke-width: inherit;
        stroke-dasharray: inherit;
      }

      .non-input path {
        visibility: hidden;
      }

      .non-input > .nodeshape > rect,
.non-input > .annotation-node > rect,
/* For styling of annotation nodes of non-input nodes. */
.non-input > g > .annotation > .annotation-node > rect {
        fill: url(#rectHatch) !important;
      }

      .non-input ellipse,
      .non-input use {
        fill: url(#ellipseHatch) !important;
      }

      .non-input > text {
        opacity: 0;
      }

      .non-input .annotation > .annotation-edge {
        marker-end: url(#annotation-arrowhead-faded);
      }

      .non-input .annotation > .annotation-edge.refline {
        marker-start: url(#ref-annotation-arrowhead-faded);
      }

      /* Input edges. */
      .input-edge-highlight > text {
        fill: black !important;
      }
      .input-highlight > .in-annotations > .annotation > .annotation-edge,
      .input-highlight-selected
        > .in-annotations
        > .annotation
        > .annotation-edge {
        stroke: #999 !important;
      }

      /* Non-input edges. */
      .non-input-edge-highlight,
.non-input > g > .annotation > path,
/* Annotation styles (label and edges respectively). */
.non-input > g >
.annotation:not(.input-highlight):not(.input-highlight-selected) >
.annotation-label
/*.annotation-edge*/
 {
        visibility: hidden;
      }

      /* --- Op Node --- */

      .op > .nodeshape > .nodecolortarget,
      .op > .annotation-node > .nodecolortarget {
        cursor: pointer;
        fill: #fff;
        stroke: #ccc;
      }

      .op.selected > .nodeshape > .nodecolortarget,
      .op.selected > .annotation-node > .nodecolortarget {
        stroke: red;
        stroke-width: 2;
      }

      .op.highlighted > .nodeshape > .nodecolortarget,
      .op.highlighted > .annotation-node > .nodecolortarget {
        stroke-width: 2;
      }

      /* --- Series Node --- */

      /* By default, don't show the series background <rect>. */
      .series > .nodeshape > rect {
        fill: hsl(0, 0%, 70%);
        fill-opacity: 0;
        stroke-dasharray: 5, 5;
        stroke-opacity: 0;
        cursor: pointer;
      }

      /* Once expanded, show the series background <rect> and hide the <use>. */
      .series.expanded > .nodeshape > rect {
        fill-opacity: 0.15;
        stroke: hsl(0, 0%, 70%);
        stroke-opacity: 1;
      }
      .series.expanded > .nodeshape > use {
        visibility: hidden;
      }

      /**
 * TODO: Simplify this by applying a stable class name to all <g>
 * elements that currently have either the nodeshape or annotation-node classes.
 */
      .series > .nodeshape > use,
      .series > .annotation-node > use {
        stroke: #ccc;
      }
      .series.highlighted > .nodeshape > use,
      .series.highlighted > .annotation-node > use {
        stroke-width: 2;
      }
      .series.selected > .nodeshape > use,
      .series.selected > .annotation-node > use {
        stroke: red;
        stroke-width: 2;
      }

      .series.selected > .nodeshape > rect {
        stroke: red;
        stroke-width: 2;
      }

      .annotation.series.selected > .annotation-node > use {
        stroke: red;
        stroke-width: 2;
      }

      /* --- Bridge Node --- */
      .bridge > .nodeshape > rect {
        stroke: #f0f;
        opacity: 0.2;
        display: none;
      }

      /* --- Structural Elements --- */
      .edge > path.edgeline.structural {
        stroke: #f0f;
        opacity: 0.2;
        display: none;
      }

      /* Reference Edge */
      .edge > path.edgeline.referenceedge {
        stroke: #ffb74d;
        opacity: 1;
      }

      /* --- Series Nodes --- */

      /* Hide the rect for a series' annotation. */
      .series > .annotation-node > rect {
        display: none;
      }

      /* --- Node label --- */

      .node > text.nodelabel {
        cursor: pointer;
        fill: #444;
      }

      .meta.expanded > text.nodelabel {
        font-size: 9px;
      }

      .series > text.nodelabel {
        font-size: 8px;
      }

      .op > text.nodelabel {
        font-size: 6px;
      }

      .bridge > text.nodelabel {
        display: none;
      }

      .node.meta.expanded > text.nodelabel {
        cursor: normal;
      }

      .annotation.meta.highlighted > text.annotation-label {
        fill: #50a3f7;
      }

      .annotation.meta.selected > text.annotation-label {
        fill: #4285f4;
      }

      /* --- Annotation --- */

      /* only applied for annotations that are not summary or constant.
(.summary, .constant gets overridden below) */
      .annotation > .annotation-node > * {
        stroke-width: 0.5;
        stroke-dasharray: 1, 1;
      }

      .annotation.summary > .annotation-node > *,
      .annotation.constant > .annotation-node > * {
        stroke-width: 1;
        stroke-dasharray: none;
      }

      .annotation > .annotation-edge {
        fill: none;
        stroke: #aaa;
        stroke-width: 0.5;
        marker-end: url(#annotation-arrowhead);
      }

      .faded .annotation > .annotation-edge {
        marker-end: url(#annotation-arrowhead-faded);
      }

      .annotation > .annotation-edge.refline {
        marker-start: url(#ref-annotation-arrowhead);
      }

      .faded .annotation > .annotation-edge.refline {
        marker-start: url(#ref-annotation-arrowhead-faded);
      }

      .annotation > .annotation-control-edge {
        stroke-dasharray: 1, 1;
      }

      #annotation-arrowhead {
        fill: #aaa;
      }

      #annotation-arrowhead-faded {
        fill: #e0d4b3;
      }

      #ref-annotation-arrowhead {
        fill: #aaa;
      }

      #ref-annotation-arrowhead-faded {
        fill: #e0d4b3;
      }

      .annotation > .annotation-label {
        font-size: 5px;
        cursor: pointer;
      }
      .annotation > .annotation-label.annotation-ellipsis {
        cursor: default;
      }

      /* Hide annotations on expanded meta nodes since they're redundant. */
      .expanded > .in-annotations,
      .expanded > .out-annotations {
        display: none;
      }

      /* --- Annotation: Constant --- */

      .constant > .annotation-node > ellipse {
        cursor: pointer;
        fill: white;
        stroke: #848484;
      }

      .constant.selected > .annotation-node > ellipse {
        fill: white;
        stroke: red;
      }

      .constant.highlighted > .annotation-node > ellipse {
        stroke-width: 1.5;
      }

      /* --- Annotation: Summary --- */

      .summary > .annotation-node > ellipse {
        cursor: pointer;
        fill: #db4437;
        stroke: #db4437;
      }

      .summary.selected > .annotation-node > ellipse {
        fill: #a52714;
        stroke: #a52714;
      }

      .summary.highlighted > .annotation-node > ellipse {
        stroke-width: 1.5;
      }

      /* --- Edge --- */

      .edge > path.edgeline {
        fill: none;
        stroke: #bbb;
        stroke-linecap: round;
        stroke-width: 0.75;
      }

      .edge .selectableedge {
        cursor: pointer;
      }

      .selectededge > path.edgeline {
        cursor: default;
        stroke: #f00;
      }

      .edge.selectededge text {
        fill: #000;
      }

      /* Labels showing tensor shapes on edges */
      .edge > text {
        font-size: 3.5px;
        fill: #666;
      }

      .dataflow-arrowhead {
        fill: #bbb;
      }

      .reference-arrowhead {
        fill: #ffb74d;
      }

      .selected-arrowhead {
        fill: #f00;
      }

      .edge .control-dep {
        stroke-dasharray: 2, 2;
      }

      /* --- Group node expand/collapse button --- */

      /* Hides expand/collapse buttons when a node isn't expanded or highlighted. Using
   incredibly small opacity so that the bounding box of the <g> parent still takes
   this container into account even when it isn't visible */
      .node:not(.highlighted):not(.expanded) > .nodeshape > .buttoncontainer {
        opacity: 0.01;
      }
      .node.highlighted > .nodeshape > .buttoncontainer {
        cursor: pointer;
      }
      .buttoncircle {
        fill: #e7811d;
      }
      .buttoncircle:hover {
        fill: #b96717;
      }
      .expandbutton,
      .collapsebutton {
        stroke: white;
      }
      /* Do not let the path elements in the button take pointer focus */
      .node > .nodeshape > .buttoncontainer > .expandbutton,
      .node > .nodeshape > .buttoncontainer > .collapsebutton {
        pointer-events: none;
      }
      /* Only show the expand button when a node is collapsed and only show the
   collapse button when a node is expanded. */
      .node.expanded > .nodeshape > .buttoncontainer > .expandbutton {
        display: none;
      }
      .node:not(.expanded) > .nodeshape > .buttoncontainer > .collapsebutton {
        display: none;
      }

      .health-pill-stats {
        font-size: 4px;
        text-anchor: middle;
      }

      .health-pill rect {
        filter: url(#health-pill-shadow);
        rx: 3;
        ry: 3;
      }

      .titleContainer {
        position: relative;
        top: 20px;
      }

      .title,
      .auxTitle,
      .functionLibraryTitle {
        position: absolute;
      }

      #minimap {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }

      .context-menu {
        position: absolute;
        display: none;
        background-color: #e2e2e2;
        border-radius: 2px;
        font-size: 14px;
        min-width: 150px;
        border: 1px solid #d4d4d4;
      }

      .context-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        cursor: default;
      }

      .context-menu ul li {
        padding: 4px 16px;
      }

      .context-menu ul li:hover {
        background-color: #f3913e;
        color: white;
      }
    </style>
    <div class="titleContainer">
      <div id="title" class="title">Main Graph</div>
      <div id="auxTitle" class="auxTitle">Auxiliary Nodes</div>
      <div id="functionLibraryTitle" class="functionLibraryTitle">
        Functions
      </div>
    </div>
    <svg id="svg">
      <defs>
        
        <path id="reference-arrowhead-path" d="M 0,0 L 10,5 L 0,10 C 3,7 3,3 0,0" />
        <marker class="reference-arrowhead" id="reference-arrowhead-small" viewbox="0 0 10 10" markerwidth="5" markerheight="5" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#reference-arrowhead-path" />
        </marker>
        <marker class="reference-arrowhead" id="reference-arrowhead-medium" viewbox="0 0 10 10" markerwidth="13" markerheight="13" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#reference-arrowhead-path" />
        </marker>
        <marker class="reference-arrowhead" id="reference-arrowhead-large" viewbox="0 0 10 10" markerwidth="16" markerheight="16" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#reference-arrowhead-path" />
        </marker>
        <marker class="reference-arrowhead" id="reference-arrowhead-xlarge" viewbox="0 0 10 10" markerwidth="20" markerheight="20" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#reference-arrowhead-path" />
        </marker>

        
        <path id="dataflow-arrowhead-path" d="M 0,0 L 10,5 L 0,10 C 3,7 3,3 0,0" />
        <marker class="dataflow-arrowhead" id="dataflow-arrowhead-small" viewbox="0 0 10 10" markerwidth="5" markerheight="5" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#dataflow-arrowhead-path" />
        </marker>
        <marker class="dataflow-arrowhead" id="dataflow-arrowhead-medium" viewbox="0 0 10 10" markerwidth="13" markerheight="13" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#dataflow-arrowhead-path" />
        </marker>
        <marker class="dataflow-arrowhead" id="dataflow-arrowhead-large" viewbox="0 0 10 10" markerwidth="16" markerheight="16" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#dataflow-arrowhead-path" />
        </marker>
        <marker class="dataflow-arrowhead" id="dataflow-arrowhead-xlarge" viewbox="0 0 10 10" markerwidth="20" markerheight="20" refx="2" refy="5" orient="auto-start-reverse" markerunits="userSpaceOnUse">
          <use xlink:href="#dataflow-arrowhead-path" />
        </marker>

        
        <marker id="annotation-arrowhead" markerwidth="5" markerheight="5" refx="5" refy="2.5" orient="auto">
          <path d="M 0,0 L 5,2.5 L 0,5 L 0,0" />
        </marker>
        <marker id="annotation-arrowhead-faded" markerwidth="5" markerheight="5" refx="5" refy="2.5" orient="auto">
          <path d="M 0,0 L 5,2.5 L 0,5 L 0,0" />
        </marker>
        <marker id="ref-annotation-arrowhead" markerwidth="5" markerheight="5" refx="0" refy="2.5" orient="auto">
          <path d="M 5,0 L 0,2.5 L 5,5 L 5,0" />
        </marker>
        <marker id="ref-annotation-arrowhead-faded" markerwidth="5" markerheight="5" refx="0" refy="2.5" orient="auto">
          <path d="M 5,0 L 0,2.5 L 5,5 L 5,0" />
        </marker>
        
        <ellipse id="op-node-stamp" rx="7.5" ry="3" stroke="inherit" fill="inherit" />
        
        <ellipse id="op-node-annotation-stamp" rx="5" ry="2" stroke="inherit" fill="inherit" />
        
        <g id="op-series-vertical-stamp">
          <use xlink:href="#op-node-stamp" x="8" y="9" />
          <use xlink:href="#op-node-stamp" x="8" y="6" />
          <use xlink:href="#op-node-stamp" x="8" y="3" />
        </g>
        
        <g id="op-series-horizontal-stamp">
          <use xlink:href="#op-node-stamp" x="16" y="4" />
          <use xlink:href="#op-node-stamp" x="12" y="4" />
          <use xlink:href="#op-node-stamp" x="8" y="4" />
        </g>
        
        <g id="op-series-annotation-stamp">
          <use xlink:href="#op-node-annotation-stamp" x="9" y="2" />
          <use xlink:href="#op-node-annotation-stamp" x="7" y="2" />
          <use xlink:href="#op-node-annotation-stamp" x="5" y="2" />
        </g>
        <svg id="summary-icon" fill="#848484" height="12" viewbox="0 0 24 24" width="12">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" />
        </svg>

        
        <pattern id="rectHatch" patterntransform="rotate(45 0 0)" width="5" height="5" patternunits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="5" style="stroke-width: 1" />
        </pattern>
        <pattern id="ellipseHatch" patterntransform="rotate(45 0 0)" width="2" height="2" patternunits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="2" style="stroke-width: 1" />
        </pattern>

        
        <filter id="health-pill-shadow" x="-40%" y="-40%" width="180%" height="180%">
          <fegaussianblur in="SourceAlpha" stdDeviation="0.8" />
          <feoffset dx="0" dy="0" result="offsetblur" />
          <feflood flood-color="#000000" />
          <fecomposite in2="offsetblur" operator="in" />
          <femerge>
            <femergenode />
            <femergenode in="SourceGraphic" />
          </femerge>
        </filter>
      </defs>
      
      <rect fill="white" width="10000" height="10000"></rect>
      <g id="root"></g>
    </svg>
    <tf-graph-minimap id="minimap"></tf-graph-minimap>
    <div id="contextMenu" class="context-menu"></div>
  </template>
  
</dom-module>


<dom-module id="tf-graph">
  <template>
    <style>
      .container {
        width: 100%;
        height: 100%;
        background: white;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      }

      .vertical {
        width: 100%;
        height: 100%;
        @apply --layout-vertical;
      }

      .auto {
        @apply --layout-flex-auto;
        @apply --layout-vertical;
      }

      h2 {
        text-align: center;
      }

      paper-button {
        text-transform: none;
      }
    </style>
    <div class="container">
      <div class="vertical">
        <template is="dom-if" if="[[title]]">
          <h2>[[title]]</h2>
        </template>
        <tf-graph-scene id="scene" class="auto" render-hierarchy="[[renderHierarchy]]" highlighted-node="[[_getVisible(highlightedNode)]]" selected-node="{{selectedNode}}" selected-edge="{{selectedEdge}}" color-by="[[colorBy]]" progress="[[progress]]" node-context-menu-items="[[nodeContextMenuItems]]" node-names-to-health-pills="[[nodeNamesToHealthPills]]" health-pill-step-index="{{healthPillStepIndex}}" handle-edge-selected="[[handleEdgeSelected]]" trace-inputs="[[traceInputs]]"></tf-graph-scene>
      </div>
    </div>
  </template>
</dom-module>




















<dom-module id="tf-debugger-continue-dialog">
  <template>
    <paper-button raised class="continue-button" on-click="_continueButtonCallback">
      <span>[[_continueButtonText]]</span>
    </paper-button>
    <paper-dialog with-backdrop id="continueDialog">
      <h2>Continue...</h2>
      <div class="continue-to-type">
        <div class="continue-to-type-name">
          Over Session Runs:
        </div>
        <paper-input id="continueNum" class="input-box" label="Number of Session Runs (including the current one):" always-float-label type="number" min="1" step="1" value="{{continueNum}}"></paper-input>
        <paper-icon-button class="go-button" icon="arrow-forward" title="Session Runs Go" on-tap="_sessionRunGoButtonCallback">
        </paper-icon-button>
      </div>
      <div class="continue-to-type">
        <div class="continue-to-type-name">
          Till Condition Met by Watched Tensor
        </div>
        <paper-dropdown-menu id="tensorConditionDropdown" class="input-box" no-label-float="true" label="Tensor Condition" selected-item-label="{{_selectedTensorCondition}}">
          
          <paper-listbox id="tensorConditionMenu" class="dropdown-content" slot="dropdown-content">
            <paper-item no-label-float="true">Contains +/-∞ or NaN</paper-item>
            <paper-item no-label-float="true">Contains +/-∞</paper-item>
            <paper-item no-label-float="true">Contains NaN</paper-item>
            <paper-item no-label-float="true">Max &gt;</paper-item>
            <paper-item no-label-float="true">Max &lt;</paper-item>
            <paper-item no-label-float="true">Min &gt;</paper-item>
            <paper-item no-label-float="true">Min &lt;</paper-item>
            <paper-item no-label-float="true">Max - Min &gt;</paper-item>
            <paper-item no-label-float="true">Max - Min &lt;</paper-item>
            <paper-item no-label-float="true">Mean &gt;</paper-item>
            <paper-item no-label-float="true">Mean &lt;</paper-item>
            <paper-item no-label-float="true">Standard deviation &gt;</paper-item>
            <paper-item no-label-float="true">Standard deviation &lt;</paper-item>
          </paper-listbox>
        </paper-dropdown-menu>
        <paper-icon-button class="go-button" icon="arrow-forward" title="Tensor Condition Go" on-tap="_tensorContinueGoButtonCallback">
        </paper-icon-button>
        <paper-input id="ref-value" class="input-box" label="Reference value to compare to" type="number" value="{{_tensorConditionRefValue}}" hidden="[[_isRefValueInputHidden]]">
        </paper-input>
      </div>
    </paper-dialog>
    <style include="dashboard-style"></style>
    <style>
      :host .continue-to-type-name {
        font-weight: bold;
      }
      :host paper-dialog {
        width: 36vw;
      }
      :host .input-box {
        display: inline-block;
        position: relative;
        width: 80%;
        font-size: 110%;
      }
      :host .go-button {
        position: relative;
        width: 15%;
        display: inline-block;
      }
    </style>
  </template>
  
</dom-module>




<dom-module id="tf-debugger-initial-dialog">
  <template>
    
    <template is="dom-if" if="[[_open]]">
      <div id="dashboard-backdrop"></div>
    </template>
    <paper-dialog id="dialog" no-cancel-on-outside-click no-cancel-on-esc-key opened="{{_open}}">
      <h2 id="dialog-title">[[_title]]</h2>
      <template is="dom-if" if="[[_hasCustomMessage]]">
        <div class="custom-message">[[_customMessage]]</div>
      </template>
      <template is="dom-if" if="[[!_hasCustomMessage]]">
        <div class="code-example">
          <div class="code-example-section">
            <div class="code-example-section-title">
              <a href="https://www.tensorflow.org/api_docs/python/tf/Session" target="_blank" rel="noopener noreferrer">tf.Session</a>:
            </div>
            <pre class="code-snippet">import tensorflow as tf
from tensorflow.python import debug as tf_debug

sess = tf.Session()
sess = tf_debug.TensorBoardDebugWrapperSession(sess, "[[_host]]:[[_port]]")
sess.run(my_fetches)
          </pre>
          </div>
          <div class="code-example-section">
            <div class="code-example-section-title">
              <a href="https://www.tensorflow.org/programmers_guide/estimators" target="_blank" rel="noopener noreferrer">Estimator</a>
              |
              <a href="https://www.tensorflow.org/api_docs/python/tf/train/MonitoredSession" target="_blank" rel="noopener noreferrer">MonitoredSession</a>:
            </div>
            <pre class="code-snippet">import tensorflow as tf
from tensorflow.python import debug as tf_debug

hook = tf_debug.TensorBoardDebugHook("[[_host]]:[[_port]]")
my_estimator.fit(x=x_data, y=y_data, steps=1000, monitors=[hook])
            </pre>
          </div>
          <div class="code-example-section">
            <div class="code-example-section-title">
              <a href="https://keras.io/models/model/" target="_blank" rel="noopener noreferrer">Keras Model</a>:
            </div>
            <pre class="code-snippet">import tensorflow as tf
from tensorflow.python import debug as tf_debug
import keras

keras.backend.set_session(
    tf_debug.TensorBoardDebugWrapperSession(tf.Session(), "[[_host]]:[[_port]]"))
# Define your keras model, called "model".
model.fit(...)
            </pre>
          </div>
        </div>
      </template>
    </paper-dialog>
    <style>
      /** We rely on a separate `_hidden` property instead of directly making use
          of the `_open` attribute because this CSS specification may strangely
          affect other elements throughout TensorBoard. See #899. */
      :host([_hidden]) {
        display: none;
      }
      :host,
      #dashboard-backdrop {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      #dashboard-backdrop {
        background: rgba(0, 0, 0, 0.6);
      }

      .code-example {
        margin: 10px;
        font-family: monospace;
      }
      .code-example-section {
        padding-bottom: 15px;
      }
      .code-example-section-title {
        font-weight: bold;
      }
      .code-snippet {
        padding-left: 1em;
      }

      #dialog-title {
        padding-bottom: 15px;
      }

      .custom-message {
        margin-top: 0;
        margin-bottom: 15px;
      }
    </style>
  </template>
  
</dom-module>





<dom-module id="tf-debugger-resizer">
  <template>
    <div class="bars">
      <div class="bars-rotator">
        <span class="bars-text">| |</span>
      </div>
    </div>
    <style>
      :host([_resizer-identifier]) {
        position: absolute;
        background: #ccc;
        user-select: none;
      }

      :host([is-horizontal]) {
        cursor: row-resize;
        height: 10px;
        left: 0;
        right: 0;
      }

      :host([_is-vertical]) {
        cursor: col-resize;
        right: -15px;
        top: 0;
        bottom: 0;
        width: 10px;
      }

      .bars {
        width: 80%;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 5px;
        transform: translate(-50%, -50%);
      }

      /** This block prevents the bars rotator from having a height that is
          the entire viewport, thus occluding it and giving it an undesired cursor
          value. */
      .bars-rotator {
        display: inline-block;
      }

      :host([is-horizontal]) .bars-rotator {
        transform: rotate(90deg);
      }

      .bars-text {
        transform: scaleY(15);
        white-space: nowrap;
        display: block;
        font-weight: 400;
      }
    </style>
  </template>
  
</dom-module>












<dom-module id="tf-op-selector">
  <template>
    <div>
      <paper-dropdown-menu id="filter-mode" no-label-float="true" label="Filter Mode" selected-item-label="{{_filterMode}}">
        <paper-listbox class="dropdown-content" slot="dropdown-content">
          <paper-item no-label-float="true">Node Name</paper-item>
          <paper-item no-label-float="true">Op Type</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <paper-input id="filter-input" label="Filter Regex" always-float-label value="{{_filterInput}}"></paper-input>
    </div>
    <paper-spinner-lite active class="spinner" id="loading-spinner" hidden="[[!_isLoading]]">
    </paper-spinner-lite>
    <div id="selector-hierarchy"></div>
    <style>
      .indented-level-container .content-container {
        margin: 0 0 0 20px;
      }

      .level-container iron-collapse {
        padding: 0 0 0 20px;
      }

      paper-checkbox {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 0 8px 0 0;
      }

      .op-type {
        padding-right: 10px;
        color: #444;
      }

      .op-title-leaf {
        text-decoration: underline;
        cursor: pointer;
      }

      .op-title-leaf:hover {
        color: blue;
      }

      .partial-checkbox {
        background: #f57c00;
      }

      .node-expand-button {
        margin: 0 0 0 -13px;
      }

      .level-title-text {
        display: inline-block;
        font-weight: 800;
        margin: 0 0 0 -1px;
      }

      .op-description {
        font-weight: 300;
        margin: 0 0 0 27px;
        padding: 10px 0;
      }

      .spinner {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }

      #filter-mode {
        width: 150px;
        display: inline-block;
      }

      #filter-input {
        width: 250px;
        display: inline-block;
      }

      .highlighted {
        color: red;
      }
      .highlighted > .op-type {
        color: red;
      }

      #selector-hierarchy {
        width: 100%;
      }

      [hidden] {
        display: none;
      }
    </style>
  </template>
  
  
</dom-module>





<dom-module id="tf-session-runs-view">
  <template>
    <div class="session-runs-div">
      <div class="section-title">Session Runs</div>
      <table id="session-runs-table" align="left" class="session-runs-table">
        <tr align="left">
          <th>Feeds</th>
          <th>Fetches</th>
          <th>Targets</th>
          <th>#(Devices)</th>
          <th>Count</th>
        </tr>
      </table>
    </div>
    <style>
      :host {
        display: block;
        padding: 20px 0;
      }

      .section-title {
        font-size: 110%;
        font-weight: bold;
      }
      :host .indented-level-container .content-container {
        margin: 0 0 0 10px;
      }

      /* TODO(cais): This needs work: the table shouldn't get too wide when
         there are many feeds/fetches/targte names. */
      .session-runs-table {
        align-content: left;
        align-items: left;
        text-align: left;
        font-size: 90%;
        border-style: solid 1px black;
        table-layout: fixed;
        width: 100%;
        word-break: break-all;
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        box-shadow: 3px 3px #ddd;
      }
      .active-session-run {
        background-color: #ffffe0;
        font-weight: bold;
      }
      .sole-active-session-run {
        background-color: rgb(172, 232, 188);
        font-weight: bold;
      }

      .node-or-tensor-element {
        text-decoration: underline;
        cursor: pointer;
      }

      .node-or-tensor-element:hover {
        color: blue;
      }
    </style>
  </template>
  
</dom-module>





<dom-module id="tf-source-code-view">
  <template>
    <div id="fullStackDialog" hidden$="[[!_fullStackShown]]">
      <div id="full-stack-title">
        <paper-icon-button icon="filter-list" disabled="true">
        </paper-icon-button>
        Full Stack Trace of Node:
        <div id="full-stack-node-name">"[[_fullStackNodeName]]"</div>
        <paper-icon-button icon="close" id="close-full-stack-button" title="Close Full Stack" on-tap="_closeFullStackDialog">
        </paper-icon-button>
      </div>
      <ul id="full-stack-content"></ul>
    </div>
    <paper-tabs id="source-files-tabs" selected="{{_filePathSelected}}">
      <template is="dom-repeat" items="[[_shortFilePaths]]">
        <paper-tab id="[[item.id]]">[[item.name]]</paper-tab>
      </template>
    </paper-tabs>
    <div id="source-file-content" class="source-content">
      <template is="dom-repeat" items="[[_fileLines]]">
        <div class$="{{item.sourceClass}}" id="source-line-[[item.lineno]]">
          <span class="source-line-number" id="source-lineno-[[item.lineno]]">
            [[item.lineno]]
          </span>
          <span class="source-line-node-toggle" id="source-line-node-toggle-[[item.lineno]]">
            [[item.numNodes]]
          </span>
          <span class="source-line-text" id="source-line-text-[[item.lineno]]">
            [[item.text]]
          </span>
          <div class="source-line-nodes" id="source-line-nodes-[[item.lineno]]"></div>
        </div>
      </template>
    </div>
    <style>
      #source-files-tabs {
        position: relative;
        height: 8%;
      }
      .source-content {
        position: relative;
        height: 90%;
        font-family: monospace;
        font-size: 90%;
        overflow-x: scroll;
        overflow-y: scroll;
      }
      .source-content :hover {
        background-color: #ffff00;
      }
      .highlighted-source-line {
        background-color: #ffffe0;
      }
      .source-line-number {
        display: inline-block;
        color: lightblue;
        width: 2em;
        text-align: right;
        padding-right: 1em;
      }
      .source-line-node-toggle {
        display: inline-block;
        color: blue;
        width: 5em;
        text-align: right;
        padding-right: 1em;
        text-decoration: underline;
        cursor: pointer;
      }
      .source-line-nodes {
        padding-left: 4em;
        text-decoration: underline;
        cursor: pointer;
        color: blue;
        margin-top: 0em;
        margin-bottom: 0em;
        margin-right: 1em;
      }
      .source-line-node-entry {
        margin-right: 1em;
        background-color: yellow;
      }
      .source-line-nodes span {
        text-decoration: none;
        background-color: yellow;
      }
      .source-line-text {
        display: inline;
        word-wrap: break-word;
      }
      #fullStackDialog {
        z-index: 1000;
        position: absolute;
        top: 10%;
        left: 50%;
        width: 45%;
        height: 85%;
        background-color: white;
        border: 1px solid gray;
        font-family: monospace;
        box-shadow: 3px 3px #ddd;
        overflow-y: auto;
      }
      #full-stack-title {
        font-size: 110%;
        position: relative;
        width: 100%;
        background-color: #eee;
        text-align: center;
        font-weight: bold;
      }
      #full-stack-node-name {
        color: blue;
      }
      :host #full-stack-content {
        padding-top: 1em;
        padding-right: 0.5em;
        margin-top: 0.5em;
        font-size: 90%;
        word-wrap: break-word;
        overflow: auto;
      }
      .stack-frame-clickable {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
      }
      .stack-frame-nonclickable {
        color: #555;
      }
      #close-full-stack-button {
        float: right;
      }
    </style>
  </template>
  
</dom-module>





<dom-module id="tf-tensor-data-summary">
  <template>
    <span class="section-title">Tensor Value Overview</span>
    <div id="tensor-data-div" class="tensor-data-div">
      <table id="tensor-data-table" align="left" class="tensor-data-table">
        <thead>
          <tr align="left">
            <th>Tensor</th>
            <th>Count</th>
            <th>DType</th>
            <th>Shape</th>
            <th width="25%">Value</th>
            <th width="25%">
              Health Pill
              <paper-toggle-button id="show-health-pills" checked="{{_healthPillsEnabled}}">
              </paper-toggle-button>
              <paper-card>
                <div class="health-pill-legend" id="health-pill-legend"></div>
              </paper-card>
            </th>
            <th width="5%"></th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <style>
      :host #tensor-data-div {
        height: 100%;
        overflow-y: auto;
      }
      .section-title {
        font-size: 110%;
        font-weight: bold;
      }
      :host .indented-level-container .content-container {
        margin: 0 0 0 10px;
      }
      :host .tensor-data-table {
        align-content: left;
        align-items: left;
        display: block;
        text-align: left;
        vertical-align: middle;
        width: 100%;
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        box-shadow: 3px 3px #ddd;
      }
      :host #tensor-data-table th {
        vertical-align: top;
      }
      :host .active-tensor {
        background-color: #ffffe0;
        font-weight: bold;
        border: solid 1px #888;
      }
      :host .highlighted {
        color: red;
      }
      :host .health-pill-legend {
        float: right;
        font-weight: normal;
      }
      :host #show-health-pills {
        display: inline-block;
      }
      .value-expansion-link {
        text-decoration: underline;
        cursor: pointer;
      }
      .value-expansion-link :hover {
        color: blue;
      }
      .health-pill :hover {
        cursor: pointer;
      }
      .tensor-name {
        text-decoration: underline;
        cursor: pointer;
      }
      .tensor-name :hover {
        color: blue;
      }
    </style>
  </template>
  
</dom-module>



<style>/* Copyright 2019 The TensorFlow Authors. All Rights Reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
     http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/

.tensor-widget {
  font-family: monospace;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}

.tensor-widget-dim {
  border: 1px solid rgb(160, 160, 160);
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 2px;
}

.tensor-widget-dim-comma {
  color: rgb(128, 128, 128);
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
}

.tensor-widget-dim-highlighted {
  border: 1px solid rgb(100, 180, 255);
  font-weight: bold;
}

.tensor-widget-dim-brackets {
  color: rgb(128, 128, 128);
  display: inline-block;
  font-size: 8pt;
}

.tensor-widget-dim-dropdown {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(128, 128, 128);
  box-shadow: 2px 2px 2px #b0b0b0;
  cursor: pointer;
  width: 180px;
  z-index: 1000;
}

.tensor-widget-dim-dropdown-menu-item {
  border-bottom: 1px solid rgb(180, 180, 180);
  font-size: 12px;
  padding: 3px;
  user-select: none;
}

.tensor-widget-dim-dropdown-menu-item-active {
  background-color: rgb(100, 180, 255);
}

.tensor-widget-dim-dropdown-menu-item-disabled {
  color: rgb(128, 128, 128);
}

.tensor-widget-dtype {
  align-content: center;
  color: rgb(60, 60, 60);
  display: inline-block;
  font-size: 8pt;
  height: 48px;
  line-height: 22px;
  max-height: 22px;
  padding-left: 14px;
  padding-right: 10px;
  position: relative;
  vertical-align: middle;
}

.tensor-widget-dtype-label {
  color: rgb(128, 128, 128);
}

.tensor-widget-header {
  background-color: rgb(252, 252, 252);
  box-shadow: 2px 2px 2px #b0b0b0;
  height: 40px;
  line-height: 40px;
  max-height: 40px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}

.tensor-widget-info {
  align-content: center;
  color: rgb(0, 0, 255);
  display: inline-block;
  font-size: 8pt;
  height: 22px;
  line-height: 22px;
  margin-left: 8px;
  max-height: 22px;
  position: relative;
  vertical-align: middle;
}

.tensor-widget-menu-thumb {
  color: rgb(32, 33, 36);
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 5px;
  position: relative;
  user-select: none;
}

.tensor-widget-menu-thumb:hover {
  color: rgb(227, 116, 0);
}

.tensor-widget-shape {
  color: rgb(60, 60, 60);
  display: inline-block;
  margin-left: 12px;
}

.tensor-widget-shape-label {
  color: rgb(128, 128, 128);
  display: inline-block;
}

.tensor-widget-shape-value {
  display: inline-block;
}

.tensor-widget-slicing-group {
  background-color: rgb(250, 250, 250);
  border-bottom: 1px solid rgb(190, 190, 190);
  display: block;
  height: 18px;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 5px;
}

.tensor-widget-tensor-name {
  color: black;
  display: inline-block;
  font-weight: bold;
}

.tensor-widget-left-ruler-tick {
  background-color: var(--ruler-background-color);
  border-bottom: var(--border-style);
  border-top: var(--border-style);
  box-shadow: var(--border-style);
  color: rgb(110, 110, 110);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 29px;
  line-height: 29px;
  margin-left: 0px;
  max-width: 45px;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  width: 45px;
}

.tensor-widget-top-ruler {
  height: 24px;
  white-space: nowrap;
}

.tensor-widget-value-tooltip {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(160, 160, 160);
  box-shadow: 1px 1px 1px #b0b0b0;
  display: none;
  font-size: 13px;
  padding: 5px;
  position: absolute;
  user-select: none;
  width: 240px;
}

.tensor-widget-value-tooltip-colorbar {
  height: 24px;
  width: 95%;
}

.tensor-widget-value-tooltip-indices {
  font-weight: bold;
}

.tensor-widget-value-tooltip-value {
  margin-top: 20px;
}

.tensor-widget-top-ruler-tick {
  background-color: var(--ruler-background-color);
  border-bottom: var(--border-style);
  border-right: var(--border-style);
  color: rgb(110, 110, 110);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-right: 2px;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  width: 45px;
}

.tensor-widget-value-div {
  border-bottom: var(--border-style);
  border-right: var(--border-style);
  cursor: pointer;
  display: inline-block;
  font-size: 80%;
  height: 24px;
  line-height: 24px;
  max-width: 45px;
  padding-right: 2px;
  text-align: right;
  user-select: none;
  vertical-align: middle;
  width: 45px;
}

.tensor-widget-value-div-selection {
  font-weight: bold;
}

.tensor-widget-value-div-selection-bottom {
  border-bottom: 0.5px solid blue;
}

.tensor-widget-value-div-selection-left {
  border-left: 0.5px solid blue;
}

.tensor-widget-value-div-selection-right {
  border-right: 0.5px solid blue;
}

.tensor-widget-value-div-selection-top {
  border-top: 0.5px solid blue;
}

.tensor-widget-value-section {
  --border-style: 1px solid rgb(140, 140, 140);
  --ruler-background-color: rgb(210, 210, 210);
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.tensor-widget-value-row {
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
}
</style>

<dom-module id="tensor-widget-style">
  <template>
    <style>/* Copyright 2019 The TensorFlow Authors. All Rights Reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
     http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/

.tensor-widget {
  font-family: monospace;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}

.tensor-widget-dim {
  border: 1px solid rgb(160, 160, 160);
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 2px;
}

.tensor-widget-dim-comma {
  color: rgb(128, 128, 128);
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
}

.tensor-widget-dim-highlighted {
  border: 1px solid rgb(100, 180, 255);
  font-weight: bold;
}

.tensor-widget-dim-brackets {
  color: rgb(128, 128, 128);
  display: inline-block;
  font-size: 8pt;
}

.tensor-widget-dim-dropdown {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(128, 128, 128);
  box-shadow: 2px 2px 2px #b0b0b0;
  cursor: pointer;
  width: 180px;
  z-index: 1000;
}

.tensor-widget-dim-dropdown-menu-item {
  border-bottom: 1px solid rgb(180, 180, 180);
  font-size: 12px;
  padding: 3px;
  user-select: none;
}

.tensor-widget-dim-dropdown-menu-item-active {
  background-color: rgb(100, 180, 255);
}

.tensor-widget-dim-dropdown-menu-item-disabled {
  color: rgb(128, 128, 128);
}

.tensor-widget-dtype {
  align-content: center;
  color: rgb(60, 60, 60);
  display: inline-block;
  font-size: 8pt;
  height: 48px;
  line-height: 22px;
  max-height: 22px;
  padding-left: 14px;
  padding-right: 10px;
  position: relative;
  vertical-align: middle;
}

.tensor-widget-dtype-label {
  color: rgb(128, 128, 128);
}

.tensor-widget-header {
  background-color: rgb(252, 252, 252);
  box-shadow: 2px 2px 2px #b0b0b0;
  height: 40px;
  line-height: 40px;
  max-height: 40px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}

.tensor-widget-info {
  align-content: center;
  color: rgb(0, 0, 255);
  display: inline-block;
  font-size: 8pt;
  height: 22px;
  line-height: 22px;
  margin-left: 8px;
  max-height: 22px;
  position: relative;
  vertical-align: middle;
}

.tensor-widget-menu-thumb {
  color: rgb(32, 33, 36);
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 5px;
  position: relative;
  user-select: none;
}

.tensor-widget-menu-thumb:hover {
  color: rgb(227, 116, 0);
}

.tensor-widget-shape {
  color: rgb(60, 60, 60);
  display: inline-block;
  margin-left: 12px;
}

.tensor-widget-shape-label {
  color: rgb(128, 128, 128);
  display: inline-block;
}

.tensor-widget-shape-value {
  display: inline-block;
}

.tensor-widget-slicing-group {
  background-color: rgb(250, 250, 250);
  border-bottom: 1px solid rgb(190, 190, 190);
  display: block;
  height: 18px;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 5px;
}

.tensor-widget-tensor-name {
  color: black;
  display: inline-block;
  font-weight: bold;
}

.tensor-widget-left-ruler-tick {
  background-color: var(--ruler-background-color);
  border-bottom: var(--border-style);
  border-top: var(--border-style);
  box-shadow: var(--border-style);
  color: rgb(110, 110, 110);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 29px;
  line-height: 29px;
  margin-left: 0px;
  max-width: 45px;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  width: 45px;
}

.tensor-widget-top-ruler {
  height: 24px;
  white-space: nowrap;
}

.tensor-widget-value-tooltip {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(160, 160, 160);
  box-shadow: 1px 1px 1px #b0b0b0;
  display: none;
  font-size: 13px;
  padding: 5px;
  position: absolute;
  user-select: none;
  width: 240px;
}

.tensor-widget-value-tooltip-colorbar {
  height: 24px;
  width: 95%;
}

.tensor-widget-value-tooltip-indices {
  font-weight: bold;
}

.tensor-widget-value-tooltip-value {
  margin-top: 20px;
}

.tensor-widget-top-ruler-tick {
  background-color: var(--ruler-background-color);
  border-bottom: var(--border-style);
  border-right: var(--border-style);
  color: rgb(110, 110, 110);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-right: 2px;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  width: 45px;
}

.tensor-widget-value-div {
  border-bottom: var(--border-style);
  border-right: var(--border-style);
  cursor: pointer;
  display: inline-block;
  font-size: 80%;
  height: 24px;
  line-height: 24px;
  max-width: 45px;
  padding-right: 2px;
  text-align: right;
  user-select: none;
  vertical-align: middle;
  width: 45px;
}

.tensor-widget-value-div-selection {
  font-weight: bold;
}

.tensor-widget-value-div-selection-bottom {
  border-bottom: 0.5px solid blue;
}

.tensor-widget-value-div-selection-left {
  border-left: 0.5px solid blue;
}

.tensor-widget-value-div-selection-right {
  border-right: 0.5px solid blue;
}

.tensor-widget-value-div-selection-top {
  border-top: 0.5px solid blue;
}

.tensor-widget-value-section {
  --border-style: 1px solid rgb(140, 140, 140);
  --ruler-background-color: rgb(210, 210, 210);
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.tensor-widget-value-row {
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
}
</style>
  </template>
</dom-module>








<dom-module id="tf-debugger-line-chart">
  <template>
    <vz-line-chart2 x-components-creation-method="[[_lineChartXComponentsCreationMethod]]" y-value-accessor="[[_lineChartYValueAccessor]]" tooltip-columns="[[_lineChartTooltipColumns]]" smoothing-enabled="[[_lineChartSmoothingEnabled]]"></vz-line-chart2>
    <style>
      vz-line-chart2 {
        height: 300px;
        position: relative;
      }
    </style>
  </template>

  
</dom-module>



<dom-module id="tf-tensor-value-view">
  <template>
    <paper-toast id="tensorValueToast" text="" always-on-top></paper-toast>
    <table class="tensor-value-view-table">
      <tr>
        <td colspan="2">
          <div>
            <paper-item id="tensor-name" on-tap="tensorNameCallback">
              <span class="tensor-name-text">[[tensorName]]</span>
            </paper-item>
            <paper-icon-button icon="close" class="value-view-icon-button" id="value-view-icon-button" title="Close" on-tap="closeButtonCallback"></paper-icon-button>
            <paper-icon-button icon="forward" class="value-view-icon-button" id="value-view-icon-button" title="Continue to" on-tap="continueToButtonCallback"></paper-icon-button>
          </div>
        </td>
      </tr>
      <tr class="tensor-value-value-tr">
        <td>
          <template is="dom-if" if="[[_useTensorWidget]]">
            <div id="tensor-widget"></div>
          </template>

          <template is="dom-if" if="[[!_useTensorWidget]]">
            <paper-item id="debug-op"></paper-item>
            <div>
              <paper-input class="inline value-card-input" label="Slicing" id="slicing" value="{{slicing}}" on-change="refresh">
              </paper-input>
              <div>
                <paper-input class="inline value-card-input" label="Time Indices" id="time-indices" value="{{timeIndices}}" on-change="refresh">
                </paper-input>
                <paper-button raised id="time-indices-toggle-button" class="tensor-value-buttons" on-click="_timeIndicesToggleButtonCallback">Full History</paper-button>
              </div>

              </div></template></td><td class="tensor-value-view-td">
                <template is="dom-if" if="[[_isValueScalar]]">
                  <paper-input class="inline" label="Scalar Value" id="value-scalar" value="[[_dataScalar]]">
                  </paper-input>
                </template>
                <template is="dom-if" if="[[_isValueLineChart]]">
                  <tf-debugger-line-chart data="[[_lineChartData]]"></tf-debugger-line-chart>
                </template>
                <template is="dom-if" if="[[_isValueImage]]">
                  <img class="value-image" height="250px" width="250px" src$="[[_dataImageSrc]]">
                </template>
              </td>
            
          
        
      </tr>
    </table>

    <style include="tensor-widget-style"></style>
    <style>
      .tensor-value-buttons {
        height: 75%;
        font-size: 10px;
      }
      .tensor-value-view-table {
        width: 500px;
        display: inline-table;
        border-spacing: 5px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 3px;
        padding-right: 3px;
        background-color: #f8f8f8;
        box-shadow: 3px 3px 1px 1px #d8d8d8;
      }
      .tensor-value-view-td {
        width: 350px;
      }
      .value-card-input {
        width: 150px;
      }
      #tensor-name {
        display: inline-block;
        position: relative;
        width: 50%;
        cursor: pointer;
      }
      .tensor-name-text {
        color: blue;
        text-decoration: underline;
      }
      #debug-op {
        font-size: 90%;
      }
      .value-image {
        image-rendering: pixelated;
      }
      .value-view-icon-button {
        display: inline-block;
        float: right;
        text-align: right;
        width: 20%;
        text-decoration: underline;
        cursor: pointer;
        font-size: 90%;
        color: blue;
      }
      #tensor-widget {
        border: 1px solid rgb(160, 160, 160);
        /* box-sizing: content-box;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; */
        height: 280px;
        width: 484px;
      }
      #slicing,
      #time-indices {
        --paper-input-container-input: {
          font-family: monospace;
        }
      }
    </style>
  </template>
  
</dom-module>


<dom-module id="tf-tensor-value-multi-view">
  <template>
    <div id="multiView">
      <div class="section-title">Tensor Values</div>
      <div id="multi-tensor-view-container"></div>
    </div>
    <style>
      .section-title {
        font-size: 110%;
        font-weight: bold;
      }
      #multiView {
        background-color: #fff;
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        box-shadow: 3px 3px #eee;
      }
    </style>
  </template>
  
</dom-module>


<dom-module id="tf-debugger-dashboard">
  <template>
    <paper-toast id="toast" text="" always-on-top></paper-toast>
    <tf-debugger-initial-dialog id="initialDialog"></tf-debugger-initial-dialog>
    
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar" id="left-pane">
        <div id="node-entries" class="node-entries">
          <div class="debugger-section-title">Runtime Node List</div>
          <div class="toggle-source-code">
            Show Code:
            <paper-toggle-button class="toggle-source-code" id="show-source-code" checked="{{_sourceCodeShown}}"></paper-toggle-button>
          </div>
          <tf-op-selector debug-watches="[[_debugWatches]]" debug-watch-change="[[_createDebugWatchChangeHandler()]]" node-clicked="[[_createNodeClickedHandler()]]" force-expand-and-check-node-name="[[_forceExpandAndCheckNodeName]]" force-expand-node-name="[[_forceExpandNodeName]]">
          </tf-op-selector>
        </div>
        <div id="source-code-view-div" class="source-code-view-div" hidden$="{{!_sourceCodeShown}}">
          <div class="debugger-section-title">Source Code</div>
          <tf-source-code-view id="sourceCodeView" request-manager="[[_requestManager]]" debug-watches="[[_debugWatches]]" focus-node-name="[[_sourceFocusNodeName]]" node-clicked="[[_createNodeClickedHandler()]]" continue-to-node="[[_createContinueToNodeHandler()]]"></tf-source-code-view>
        </div>
        <tf-debugger-resizer current-length="{{_leftPaneWidth}}" min-length="[[_minleftPaneWidth]]" max-length="[[_maxleftPaneWidth]]">
        </tf-debugger-resizer>
        <div>
          <tf-session-runs-view id="sessionRunsView" latest-session-run="[[_latestSessionRun]]" session-run-key-to-device-names="[[_sessionRunKey2DeviceNames]]" sole-active="[[_sessionRunSoleActive]]" node-or-tensor-clicked="[[_createFeedFetchTargetClickedHandler()]]">
          </tf-session-runs-view>
        </div>
        <div class="buttons-container">
          <paper-button raised class="continue-button" on-click="_step">
            <span>[[_stepButtonText]]</span>
          </paper-button>
          <tf-debugger-continue-dialog id="continueDialog" session-run-go="[[_createSessionRunGo()]]" tensor-condition-go="[[_createTensorConditionGo()]]" force-continuation-stop="[[_createForceContinuationStop()]]">
          </tf-debugger-continue-dialog>
        </div>
        <div class="container">
          <tf-graph-loader id="loader" out-graph-hierarchy="{{graphHierarchy}}" out-graph="{{graph}}" out-stats="{{stats}}" progress="{{_graphProgress}}"></tf-graph-loader>
        </div>
      </div>
      <div class="center" slot="center" id="center-content">
        <div id="top-right-quadrant">
          <paper-tabs selected="{{_topRightSelected}}">
            <template is="dom-repeat" items="[[_topRightTabs]]">
              <paper-tab id="[[item.id]]">[[item.name]]</paper-tab>
            </template>
          </paper-tabs>
          <div class="runtime-graph-device">
            <span id="runtime-graph-device-name"> </span>
            <paper-dropdown-menu id="active-runtime-graph-device-name" no-label-float="true" label="Device name" selected-item-label="{{_activeRuntimeGraphDeviceName}}">
              <paper-listbox class="dropdown-content" slot="dropdown-content">
                <template is="dom-repeat" items="[[_activeSessionRunDevices]]">
                  <paper-item no-label-float="true">[[item]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
            <paper-spinner-lite class="spinner" id="top-right-spinner" hidden="[[!_busy]]" active="[[_busy]]">
            </paper-spinner-lite>
          </div>
          <paper-progress id="top-right-progress-bar" value="0"></paper-progress>
          <template is="dom-if" if="[[_isTopRightRuntimeGraphsActive]]">
            <div id="graph-container">
              <tf-graph id="graph" graph-hierarchy="[[graphHierarchy]]" basic-graph="[[graph]]" stats="[[stats]]" progress="{{_graphProgress}}" color-by="structure" color-by-params="{{colorByParams}}" render-hierarchy="{{_renderHierarchy}}" node-context-menu-items="[[_createNodeContextMenuItems()]]"></tf-graph>
              <div class="context-menu"></div>
            </div>
          </template>
          <template is="dom-if" if="[[_isTopRightTensorValuesActive]]">
            <tf-tensor-value-multi-view id="tensorValueMultiView" continue-to-callback="[[_createContinueToCallback()]]" tensor-name-clicked="[[_createNodeClickedHandler()]]" get-health-pill="[[_createGetHealthPill()]]">
            </tf-tensor-value-multi-view>
          </template>
        </div>

        <tf-debugger-resizer is-horizontal="true" current-length="{{_topRightQuadrantHeight}}" min-length="[[_minTopRightQuadrantHeight]]" max-length="[[_maxTopRightQuadrantHeight]]">
        </tf-debugger-resizer>

        <div id="tensor-data" class="tensor-data">
          <tf-tensor-data-summary id="tensorDataSummary" latest-tensor-data="[[_latestTensorData]]" expand-handler="[[_createTensorDataExpandHandler()]]" continue-to-callback="[[_createContinueToCallback()]]" highlighted-node-name="[[_highlightNodeName]]" tensor-name-clicked="[[_createNodeClickedHandler()]]" get-health-pill="[[_createGetHealthPill()]]">
          </tf-tensor-data-summary>
        </div>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      :host {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
      }
      paper-toast {
        text-align: center;
        font-size: 110%;
        width: 40vw;
        margin-left: 30vw;
      }
      tf-dashboard-layout {
        --tf-dashboard-layout-sidebar-basis: auto;
        --tf-dashboard-layout-sidebar-max-width: none;
        --tf-dashboard-layout-sidebar-min-width: none;
      }
      .debugger-section-title {
        font-size: 110%;
        font-weight: bold;
      }
      paper-tabs {
        color: #555;
        font-weight: normal;
      }
      paper-tab.iron-selected {
        color: black;
        font-weight: bold;
      }
      #initialDialog {
        /** This matches the default z-index of paper-dialog backdrops. */
        z-index: 102;
      }
      /** Resize the region for the graph as the user resizes the region. */
      #graph-container {
        height: calc(100% - 120px);
        /** Clip the minimap if the height of the graph container is small. */
        overflow: hidden;
        position: relative;
      }
      #graph {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
      }
      #tooltip-sorting {
        display: flex;
        font-size: 14px;
        margin-top: 5px;
      }
      #tooltip-sorting-label {
        margin-top: 13px;
      }
      #tooltip-sorting paper-dropdown-menu {
        margin-left: 10px;
        --paper-input-container-focus-color: var(--tb-orange-strong);
        width: 105px;
      }
      #x-type-selector paper-button {
        margin: 5px 3px;
      }
      .runtime-graph-device {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
      }
      #runtime-graph-device-name {
        font-size: 85%;
        word-break: break-all;
        display: inline-block;
      }
      #active-runtime-graph-device-name {
        font-size: 85%;
        width: 350px;
        display: inline-block;
      }
      #top-right-progress-bar {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
      }
      .line-item {
        display: block;
        padding-top: 5px;
      }
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
      .sidebar {
        height: 100%;
        overflow-x: visible;
        position: relative;
      }
      .center {
        position: relative;
        height: 100%;
      }
      tf-debugger-resizer {
        right: -10px;
      }
      #center-content {
        position: absolute;
        right: 0;
      }
      /** The resizer should have no space to the left of it. */
      #center-content tf-debugger-resizer[is-horizontal] {
        margin-left: -23px;
      }
      .context-menu {
        position: absolute;
        display: none;
        background-color: #e2e2e2;
        border-radius: 2px;
        font-size: 14px;
        min-width: 150px;
        border: 1px solid #d4d4d4;
      }
      .spinner {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
      .node-entries {
        box-shadow: 3px 3px #ddd;
        box-sizing: border-box;
        height: 80%;
        overflow: auto;
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 3px;
        position: relative;
        vertical-align: top;
        width: 100%;
      }
      .source-code-view-div {
        position: relative;
        height: 40%;
        width: 100%;
        vertical-align: top;
        overflow: hidden;
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
        box-shadow: 3px 3px #ddd;
      }
      #sessionRunsView {
        position: relative;
        width: 100%;
        overflow: auto;
        max-height: 25vh;
      }
      .buttons-container {
        padding: 20px 0;
      }
      #tensor-data {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 0;
        margin: 0 0 20px 0;
      }
      #tensorDataSummary {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
      }
      #top-right-quadrant {
        height: 66%;
        overflow: auto;
      }
      .toggle-source-code {
        margin-right: 1em;
        font-size: 80%;
        float: right;
      }
      .context-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        cursor: default;
      }
      .context-menu ul li {
        padding: 4px 16px;
      }
      .context-menu ul li:hover {
        background-color: #f3913e;
        color: white;
      }

      paper-input {
        width: 200px;
      }
      .inline,
      paper-item {
        display: inline;
      }

      vz-line-chart {
        height: 300px;
        position: relative;
      }
      [hidden] {
        display: none;
      }
    </style>
  </template>
  
  
</dom-module>











<dom-module id="paper-material-shared-styles">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
      }

      :host([elevation="1"]) {
        @apply --shadow-elevation-2dp;
      }

      :host([elevation="2"]) {
        @apply --shadow-elevation-4dp;
      }

      :host([elevation="3"]) {
        @apply --shadow-elevation-6dp;
      }

      :host([elevation="4"]) {
        @apply --shadow-elevation-8dp;
      }

      :host([elevation="5"]) {
        @apply --shadow-elevation-16dp;
      }
    </style>
  </template>
</dom-module>




<dom-module id="paper-material">
  <template>
    <style include="paper-material-shared-styles"></style>
    <style>
      :host([animated]) {
        @apply --shadow-transition;
      }
      :host {
        @apply --paper-material;
      }
    </style>

    <slot></slot>
  </template>
</dom-module>













<dom-module id="tf-graph-debugger-data-card">
  <template>
    <style>
      :host {
        font-size: 12px;
        margin: 0;
        padding: 0;
        display: block;
      }

      h2 {
        padding: 0;
        text-align: center;
        margin: 0;
      }

      .health-pill-legend {
        padding: 15px;
      }

      .health-pill-legend h2 {
        text-align: left;
      }

      .health-pill-entry {
        margin: 10px 10px 10px 0;
      }

      .health-pill-entry .color-preview {
        width: 26px;
        height: 26px;
        border-radius: 3px;
        display: inline-block;
        margin: 0 10px 0 0;
      }

      .health-pill-entry .color-label,
      .health-pill-entry .tensor-count {
        color: #777;
        display: inline-block;
        height: 26px;
        font-size: 22px;
        line-height: 26px;
        vertical-align: top;
      }

      .health-pill-entry .tensor-count {
        float: right;
      }

      #health-pill-step-slider {
        width: 100%;
        margin: 0 0 0 -15px;
        /* 31 comes from adding a padding of 15px from both sides of the paper-slider, subtracting
   * 1px so that the slider width aligns with the image (the last slider marker takes up 1px),
   * and adding 2px to account for a border of 1px on both sides of the image. 30 - 1 + 2.
   * Apparently, the paper-slider lacks a mixin for those padding values. */
        width: calc(100% + 31px);
      }

      #health-pills-loading-spinner {
        width: 20px;
        height: 20px;
        vertical-align: top;
      }

      #health-pill-step-number-input {
        text-align: center;
        vertical-align: top;
      }

      #numeric-alerts-table-container {
        max-height: 400px;
        overflow-x: hidden;
        overflow-y: auto;
      }

      #numeric-alerts-table {
        text-align: left;
      }

      #numeric-alerts-table td {
        vertical-align: top;
      }

      #numeric-alerts-table .first-offense-td {
        display: inline-block;
      }

      .first-offense-td {
        width: 80px;
      }

      .tensor-device-td {
        max-width: 140px;
        word-wrap: break-word;
      }

      .tensor-section-within-table {
        color: #266236;
        cursor: pointer;
        opacity: 0.8;
        text-decoration: underline;
      }

      .tensor-section-within-table:hover {
        opacity: 1;
      }

      .device-section-within-table {
        color: #666;
      }

      .mini-health-pill {
        width: 130px;
      }

      .mini-health-pill > div {
        height: 100%;
        width: 60px;
        border-radius: 3px;
      }

      #event-counts-th {
        padding: 0 0 0 10px;
      }

      .negative-inf-mini-health-pill-section {
        background: rgb(255, 141, 0);
        width: 20px;
      }

      .positive-inf-mini-health-pill-section {
        background: rgb(0, 62, 212);
        width: 20px;
      }

      .nan-mini-health-pill-section {
        background: rgb(204, 47, 44);
        width: 20px;
      }

      .negative-inf-mini-health-pill-section,
      .positive-inf-mini-health-pill-section,
      .nan-mini-health-pill-section {
        color: #fff;
        display: inline-block;
        height: 100%;
        line-height: 20px;
        margin: 0 0 0 10px;
        text-align: center;
      }

      .no-numeric-alerts-notification {
        margin: 0;
      }
    </style>
    <paper-material elevation="1" class="card health-pill-legend">
      <div class="title">
        Enable all (not just sampled) steps. Requires slow disk read.
      </div>
      <paper-toggle-button id="enableAllStepsModeToggle" checked="{{allStepsModeEnabled}}">
      </paper-toggle-button>
      <h2>
        Step of Health Pills:
        <template is="dom-if" if="[[allStepsModeEnabled]]">
          <input type="number" id="health-pill-step-number-input" min="0" max="[[_biggestStepEverSeen]]" value="{{specificHealthPillStep::input}}">
        </template>
        <template is="dom-if" if="[[!allStepsModeEnabled]]">
          [[_currentStepDisplayValue]]
        </template>
        <paper-spinner-lite active hidden$="[[!areHealthPillsLoading]]" id="health-pills-loading-spinner"></paper-spinner-lite>
      </h2>
      <template is="dom-if" if="[[allStepsModeEnabled]]">
        <paper-slider id="health-pill-step-slider" immediate-value="{{specificHealthPillStep}}" max="[[_biggestStepEverSeen]]" snaps step="1" value="{{specificHealthPillStep}}"></paper-slider>
      </template>
      <template is="dom-if" if="[[!allStepsModeEnabled]]">
        <template is="dom-if" if="[[_maxStepIndex]]">
          <paper-slider id="health-pill-step-slider" immediate-value="{{healthPillStepIndex}}" max="[[_maxStepIndex]]" snaps step="1" value="{{healthPillStepIndex}}"></paper-slider>
        </template>
      </template>
      <h2>
        Health Pill
        <template is="dom-if" if="[[healthPillValuesForSelectedNode]]">
          Counts for Selected Node
        </template>
        <template is="dom-if" if="[[!healthPillValuesForSelectedNode]]">
          Legend
        </template>
      </h2>
      <template is="dom-repeat" items="[[healthPillEntries]]">
        <div class="health-pill-entry">
          <div class="color-preview" style="background:[[item.background_color]]"></div>
          <div class="color-label">[[item.label]]</div>
          <div class="tensor-count">
            [[_computeTensorCountString(healthPillValuesForSelectedNode,
            index)]]
          </div>
        </div>
      </template>
      <div hidden$="[[!_hasDebuggerNumericAlerts(debuggerNumericAlerts)]]">
        <h2 id="numeric-alerts-header">Numeric Alerts</h2>
        <p>
          Alerts are sorted from top to bottom by increasing timestamp.
        
        <div id="numeric-alerts-table-container">
          <table id="numeric-alerts-table">
            <thead>
              <tr>
                <th>First Offense</th>
                <th>Tensor (Device)</th>
                <th id="event-counts-th">Event Counts</th>
              </tr>
            </thead>
            <tbody id="numeric-alerts-body"></tbody>
          </table>
        </div>
      </div>
      <template is="dom-if" if="[[!_hasDebuggerNumericAlerts(debuggerNumericAlerts)]]">
        <p class="no-numeric-alerts-notification">
          No numeric alerts so far. That is likely good. Alerts indicate the
          presence of NaN or (+/-) Infinity values, which may be concerning.
        
      </template>
    </paper-material>
  </template>
  
</dom-module>












<dom-module id="iron-list">
  <template>
    <style>
      :host {
        display: block;
      }

      @media only screen and (-webkit-max-device-pixel-ratio: 1) {
        :host {
          will-change: transform;
        }
      }

      #items {
        @apply --iron-list-items-container;
        position: relative;
      }

      :host(:not([grid])) #items > ::slotted(*) {
        width: 100%;
      }

      #items > ::slotted(*) {
        box-sizing: border-box;
        margin: 0;
        position: absolute;
        top: 0;
        will-change: transform;
      }
    </style>

    <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}"></array-selector>

    <div id="items">
      <slot></slot>
    </div>

  </template>
</dom-module>













<dom-module id="paper-item-body">
  <template>
    <style>
      :host {
        overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
        @apply --layout-vertical;
        @apply --layout-center-justified;
        @apply --layout-flex;
      }

      :host([two-line]) {
        min-height: var(--paper-item-body-two-line-min-height, 72px);
      }

      :host([three-line]) {
        min-height: var(--paper-item-body-three-line-min-height, 88px);
      }

      :host > ::slotted(*) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      :host > ::slotted([secondary]) {
        @apply --paper-font-body1;

        color: var(--paper-item-body-secondary-color, var(--secondary-text-color));

        @apply --paper-item-body-secondary;
      }
    </style>

    <slot></slot>
  </template>

  
</dom-module>








<dom-module id="tf-graph-icon">
  <template>
    <style>
      :host {
        font-size: 0;
      }

      .faded-rect {
        fill: url(#rectHatch);
      }

      .faded-ellipse {
        fill: url(#ellipseHatch);
      }

      .faded-rect,
      .faded-ellipse,
      .faded-series {
        stroke: var(--tb-graph-faded) !important;
      }
      #rectHatch line,
      #ellipseHatch line {
        color: #e0d4b3 !important;
        fill: white;
        stroke: #e0d4b3 !important;
      }
    </style>
    
    <svg height="0" width="0" id="svgDefs">
      <defs>
        
        <pattern id="rectHatch" patterntransform="rotate(45 0 0)" width="5" height="5" patternunits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="5" style="stroke-width: 1" />
        </pattern>
        <pattern id="ellipseHatch" patterntransform="rotate(45 0 0)" width="2" height="2" patternunits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="2" style="stroke-width: 1" />
        </pattern>
        
        <ellipse id="op-node-stamp" rx="7.5" ry="3" stroke="inherit" fill="inherit" />
        
        <ellipse id="op-node-annotation-stamp" rx="5" ry="2" stroke="inherit" fill="inherit" />
        
        <g id="op-series-vertical-stamp">
          <use xlink:href="#op-node-stamp" x="8" y="9" />
          <use xlink:href="#op-node-stamp" x="8" y="6" />
          <use xlink:href="#op-node-stamp" x="8" y="3" />
        </g>
        <g id="op-series-horizontal-stamp">
          <use xlink:href="#op-node-stamp" x="16" y="4" />
          <use xlink:href="#op-node-stamp" x="12" y="4" />
          <use xlink:href="#op-node-stamp" x="8" y="4" />
        </g>
        <g id="summary-icon" fill="#848484" height="12" viewbox="0 0 24 24" width="12">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" />
        </g>
      </defs>
    </svg>
    <template is="dom-if" if="[[_isType(type, 'CONST')]]">
      <svg height$="[[height]]" preserveaspectratio="xMinYMid meet" viewbox="0 0 10 10">
        <circle cx="5" cy="5" r="3" fill$="[[_fill]]" stroke$="[[_stroke]]" />
      </svg>
    </template>
    <template is="dom-if" if="[[_isType(type, 'SUMMARY')]]">
      <svg width$="[[height]]" height$="[[height]]" viewbox="0 0 24 24" fill="#848484">
        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" />
      </svg>
    </template>
    <template is="dom-if" if="[[_isType(type, 'OP')]]">
      <svg height$="[[height]]" preserveaspectratio="xMinYMid meet" viewbox="0 0 16 8">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#op-node-stamp" fill$="[[_fill]]" stroke$="[[_stroke]]" class$="{{_fadedClass(faded, 'ellipse')}}" x="8" y="4" />
      </svg>
    </template>
    <template is="dom-if" if="[[_isType(type, 'META')]]">
      <svg height$="[[height]]" preserveaspectratio="xMinYMid meet" viewbox="0 0 37 16">
        <rect x="1" y="1" fill$="[[_fill]]" stroke$="[[_stroke]]" class$="{{_fadedClass(faded, 'rect')}}" stroke-width="2px" height="14" width="35" rx="5" ry="5" />
      </svg>
    </template>
    <template is="dom-if" if="[[_isType(type, 'SERIES')]]">
      <template is="dom-if" if="[[vertical]]">
        <svg height$="[[height]]" preserveaspectratio="xMinYMid meet" viewbox="0 0 16 15">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#op-series-vertical-stamp" fill$="[[_fill]]" stroke$="[[_stroke]]" class$="{{_fadedClass(faded, 'series')}}" x="0" y="2" />
        </svg>
      </template>
      <template is="dom-if" if="[[!vertical]]">
        <svg height$="[[height]]" preserveaspectratio="xMinYMid meet" viewbox="0 0 24 10">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#op-series-horizontal-stamp" fill$="[[_fill]]" stroke$="[[_stroke]]" class$="{{_fadedClass(faded, 'series')}}" x="0" y="1" />
        </svg>
      </template>
    </template>
  </template>

  
</dom-module>


<dom-module id="tf-node-icon">
  <template>
    <style>
      tf-graph-icon {
        --tb-graph-faded: var(--tb-graph-faded);
      }
    </style>
    <tf-graph-icon id="icon" type="[[_getType(node, summary, const, type)]]" height="[[height]]" fill-override="[[_fillOverride]]" stroke-override="[[_getStrokeOverride(_fillOverride)]]" faded="[[_getFaded(renderInfo)]]" vertical="[[_isVertical(node, vertical)]]"></tf-graph-icon>
  </template>

  
</dom-module>


<dom-module id="tf-graph-op-compat-list-item">
  <template>
    <style>
      #list-item {
        width: 100%;
        color: #565656;
        font-size: 11pt;
        font-weight: 400;
        position: relative;
        display: inline-block;
      }

      #list-item:hover {
        background-color: var(--google-yellow-100);
      }

      .clickable {
        cursor: pointer;
      }

      #list-item span {
        margin-left: 40px;
      }

      #list-item.excluded span {
        color: #999;
      }

      #list-item span.edge-label {
        float: right;
        font-size: 10px;
        margin-left: 3px;
        margin-right: 5px;
      }

      .node-icon {
        position: absolute;
        top: 1px;
        left: 2px;
      }

      .faded span {
        color: var(--tb-graph-faded);
      }
    </style>

    <div id="list-item" on-mouseover="_nodeListener" on-mouseout="_nodeListener" on-click="_nodeListener">
      <div class$="{{_fadedClass(itemRenderInfo)}}">
        <tf-node-icon class="node-icon" height="12" color-by="[[colorBy]]" color-by-params="[[colorByParams]]" node="[[itemNode]]" render-info="[[itemRenderInfo]]" template-index="[[templateIndex]]">
        </tf-node-icon>
        <span title$="[[name]]">[[name]]</span>
      </div>
    </div>
  </template>

  
</dom-module>


<dom-module id="tf-graph-op-compat-card">
  <template>
    <style>
      :host {
        max-height: 500px;
      }

      .incompatible-ops-list {
        height: 350px;
        max-height: 400px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
      }

      iron-list {
        flex: 1 1 auto;
      }

      paper-item {
        padding: 0;
        background: #e9e9e9;
      }

      paper-item-body[two-line] {
        min-height: 0;
        padding: 8px 12px 4px;
      }

      .expandedInfo {
        padding: 8px 12px;
        font-weight: 500;
        font-size: 12pt;
        width: 100%;
      }

      .node-name {
        white-space: normal;
        word-wrap: break-word;
        font-size: 14pt;
        font-weight: 500;
      }

      .subtitle {
        font-size: 12pt;
        color: #5e5e5e;
      }

      .toggle-button {
        float: right;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .non-control-list-item {
        padding-left: 10px;
      }

      div.op-compat-display {
        margin-top: 10px;
        display: inline-block;
      }

      svg.op-compat {
        width: 250px;
        height: 25px;
        float: left;
      }

      div.op-compat-value {
        float: right;
        height: 100%;
        font-size: 14px;
        color: black;
        margin-left: 10px;
      }
    </style>

    <paper-item>
      <paper-item-body two-line>
        <div>
          <paper-icon-button icon="{{_getToggleIcon(_expanded)}}" on-click="_toggleExpanded" class="toggle-button">
          </paper-icon-button>
          <div class="node-name" id="nodetitle">[[nodeTitle]]</div>
        </div>
        <div secondary>
          <div class="subtitle">
            <div class="op-compat-display">
              <svg class="op-compat" preserveaspectratio="xMinYMid meet" viewbox="0 0 250 25">
                <defs>
                  <lineargradient id="op-compat-fill">
                    <stop offset="0" stop-color$="[[_opCompatColor]]"></stop>
                    <stop offset$="[[_opCompatScore]]" stop-color$="[[_opCompatColor]]"></stop>
                    <stop offset$="[[_opCompatScore]]" stop-color$="[[_opIncompatColor]]"></stop>
                    <stop offset="1" stop-color$="[[_opIncompatColor ]]"></stop>
                  </lineargradient>
                </defs>
                <rect height="25" width="250" rx="5" ry="5" style="fill: url('#op-compat-fill');" />
              </svg>
              <div class="op-compat-value">[[_opCompatScoreLabel]]</div>
            </div>
          </div>
        </div>
      </paper-item-body>
    </paper-item>

    <iron-collapse opened="{{_expanded}}">
      <template is="dom-if" if="{{_expanded}}" restamp="true">
        <div class="expandedInfo">
          Incompatible Operations: (<span>[[_totalIncompatOps]]</span>)
          <iron-list class="incompatible-ops-list" id="incompatibleOpsList" items="[[_incompatibleOpNodes]]">
            <template>
              <tf-graph-op-compat-list-item class="non-control-list-item" item-node="[[item]]" item-render-info="[[_getRenderInfo(item.name, renderHierarchy)]]" name="[[item.name]]" template-index="[[_templateIndex]]" color-by="[[colorBy]]" item-type="incompatible-ops">
              </tf-graph-op-compat-list-item>
            </template>
          </iron-list>
        </div>
      </template>
    </iron-collapse>
  </template>

  
</dom-module>














<dom-module id="tf-node-list-item">
  <template>
    <style>
      #list-item {
        width: 100%;
        color: #565656;
        font-size: 11pt;
        font-weight: 400;
        position: relative;
        display: inline-block;
      }

      #list-item:hover {
        background-color: var(--google-yellow-100);
      }

      .clickable {
        cursor: pointer;
      }

      #list-item span {
        margin-left: 40px;
      }

      #list-item.excluded span {
        color: #999;
      }

      #list-item span.edge-label {
        float: right;
        font-size: 10px;
        margin-left: 3px;
        margin-right: 5px;
      }

      .node-icon {
        position: absolute;
        top: 1px;
        left: 2px;
      }

      .faded span {
        color: var(--tb-graph-faded);
      }
    </style>
    <div id="list-item" on-mouseover="_nodeListener" on-mouseout="_nodeListener" on-click="_nodeListener">
      <div class$="{{_fadedClass(itemRenderInfo)}}">
        <tf-node-icon class="node-icon" height="12" color-by="[[colorBy]]" color-by-params="[[colorByParams]]" node="[[itemNode]]" render-info="[[itemRenderInfo]]" template-index="[[templateIndex]]"></tf-node-icon>
        <span title$="[[name]]">[[name]]</span>
        <span class="edge-label">[[edgeLabel]]</span>
      </div>
    </div>
  </template>

  
</dom-module>


<dom-module id="tf-node-info">
  <template>
    <style>
      .sub-list-group {
        font-weight: 500;
        font-size: 12pt;
        padding-bottom: 8px;
        width: 100%;
      }

      .sub-list {
        max-height: 300px;
        overflow-y: scroll;
      }

      .attr-left {
        float: left;
        width: 30%;
        word-wrap: break-word;
        color: #565656;
        font-size: 11pt;
        font-weight: 400;
      }

      .attr-right {
        margin-left: 30%;
        word-wrap: break-word;
        color: #565656;
        font-weight: 400;
      }

      .sub-list-table {
        display: table;
        width: 100%;
      }

      .sub-list-table-row {
        display: table-row;
      }

      .sub-list-table-row .sub-list-table-cell:last-child {
        text-align: right;
      }

      .sub-list-table-cell {
        color: #565656;
        display: table-cell;
        font-size: 11pt;
        font-weight: 400;
        max-width: 200px;
        padding: 0 4px;
      }

      paper-item {
        padding: 0;
        background: #e9e9e9;
      }

      paper-item-body[two-line] {
        min-height: 0;
        padding: 8px 12px 4px;
      }

      .expandedInfo {
        padding: 8px 12px;
      }

      .controlDeps {
        padding: 0 0 0 8px;
      }

      .node-name {
        white-space: normal;
        word-wrap: break-word;
        font-size: 14pt;
        font-weight: 500;
      }

      .node-icon {
        float: right;
      }

      .subtitle {
        font-size: 12pt;
        color: #5e5e5e;
      }

      .controlLine {
        font-size: 11pt;
        font-weight: 400;
      }

      .toggle-button {
        float: right;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .control-toggle-button {
        float: left;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .toggle-include-group {
        padding-top: 4px;
      }

      .toggle-include {
        margin: 5px 6px;
        text-transform: none;
        padding: 4px 6px;
        font-size: 10pt;
        background-color: #fafafa;
        color: #666;
      }

      .toggle-include:hover {
        background-color: var(--google-yellow-100);
      }

      .non-control-list-item {
        padding-left: 10px;
      }
    </style>
    <paper-item>
      <paper-item-body two-line>
        <div>
          <paper-icon-button icon="{{_getToggleIcon(_expanded)}}" on-click="_toggleExpanded" class="toggle-button">
          </paper-icon-button>
          <div class="node-name" id="nodetitle"></div>
        </div>
        <div secondary>
          <tf-node-icon class="node-icon" node="[[_node]]" render-info="[[_getRenderInfo(nodeName, renderHierarchy)]]" color-by="[[colorBy]]" template-index="[[_templateIndex]]"></tf-node-icon>
          <template is="dom-if" if="{{_node.op}}">
            <div class="subtitle">
              Operation:
              <span>[[_node.op]]</span>
            </div>
          </template>
          <template is="dom-if" if="{{_node.metagraph}}">
            <div class="subtitle">
              Subgraph:
              <span>[[_node.cardinality]]</span> nodes
            </div>
          </template>
        </div>
      </paper-item-body>
    </paper-item>
    <iron-collapse opened="{{_expanded}}">
      <template is="dom-if" if="{{_expanded}}" restamp="true">
        <div class="expandedInfo">
          <div class="sub-list-group attributes">
            Attributes (<span>[[_attributes.length]]</span>)
            <iron-list class="sub-list" id="attributesList" items="[[_attributes]]">
              <template>
                <div>
                  <div class="attr-left">[[item.key]]</div>
                  <div class="attr-right">[[item.value]]</div>
                </div>
              </template>
            </iron-list>
          </div>

          <template is="dom-if" if="{{_device}}">
            <div class="sub-list-group device">
              <div class="attr-left">Device</div>
              <div class="attr-right">[[_device]]</div>
            </div>
          </template>

          <div class="sub-list-group predecessors">
            Inputs (<span>[[_totalPredecessors]]</span>)
            <iron-list class="sub-list" id="inputsList" items="[[_predecessors.regular]]">
              <template>
                <tf-node-list-item class="non-control-list-item" card-node="[[_node]]" item-node="[[item.node]]" edge-label="[[item.edgeLabel]]" item-render-info="[[item.renderInfo]]" name="[[item.name]]" item-type="predecessors" color-by="[[colorBy]]" template-index="[[_templateIndex]]">
                </tf-node-list-item>
              </template>
            </iron-list>
            <template is="dom-if" if="[[_predecessors.control.length]]">
              <div class="controlDeps">
                <div class="controlLine">
                  <paper-icon-button icon="{{_getToggleIcon(_openedControlPred)}}" on-click="_toggleControlPred" class="control-toggle-button">
                  </paper-icon-button>
                  Control dependencies
                </div>
                <iron-collapse opened="{{_openedControlPred}}" no-animation>
                  <template is="dom-if" if="{{_openedControlPred}}" restamp="true">
                    <iron-list class="sub-list" items="[[_predecessors.control]]">
                      <template>
                        <tf-node-list-item card-node="[[_node]]" item-node="[[item.node]]" item-render-info="[[item.renderInfo]]" name="[[item.name]]" item-type="predecessors" color-by="[[colorBy]]" template-index="[[_templateIndex]]">
                        </tf-node-list-item>
                      </template>
                    </iron-list>
                  </template>
                </iron-collapse>
              </div>
            </template>
          </div>

          <div class="sub-list-group successors">
            Outputs (<span>[[_totalSuccessors]]</span>)
            <iron-list class="sub-list" id="outputsList" items="[[_successors.regular]]">
              <template>
                <tf-node-list-item class="non-control-list-item" card-node="[[_node]]" item-node="[[item.node]]" edge-label="[[item.edgeLabel]]" item-render-info="[[item.renderInfo]]" name="[[item.name]]" item-type="successor" color-by="[[colorBy]]" template-index="[[_templateIndex]]">
                </tf-node-list-item>
              </template>
            </iron-list>
            <template is="dom-if" if="[[_successors.control.length]]">
              <div class="controlDeps">
                <div class="controlLine">
                  <paper-icon-button icon="{{_getToggleIcon(_openedControlSucc)}}" on-click="_toggleControlSucc" class="control-toggle-button">
                  </paper-icon-button>
                  Control dependencies
                </div>
                <iron-collapse opened="{{_openedControlSucc}}" no-animation>
                  <template is="dom-if" if="{{_openedControlSucc}}" restamp="true">
                    <iron-list class="sub-list" items="[[_successors.control]]">
                      <template>
                        <tf-node-list-item card-node="[[_node]]" item-node="[[item.node]]" item-render-info="[[item.renderInfo]]" name="[[item.name]]" item-type="successors" color-by="[[colorBy]]" template-index="[[_templateIndex]]">
                        </tf-node-list-item>
                      </template>
                    </iron-list>
                  </template>
                </iron-collapse>
              </div>
            </template>
          </div>
          <template is="dom-if" if="{{_hasDisplayableNodeStats}}">
            <div class="sub-list-group node-stats">
              Node Stats
              <div class="sub-list-table">
                <template is="dom-if" if="{{_nodeStats.totalBytes}}">
                  <div class="sub-list-table-row">
                    <div class="sub-list-table-cell">Memory</div>
                    <div class="sub-list-table-cell">
                      [[_nodeStatsFormattedBytes]]
                    </div>
                  </div>
                </template>
                <template is="dom-if" if="{{_getTotalMicros(_nodeStats)}}">
                  <div class="sub-list-table-row">
                    <div class="sub-list-table-cell">Compute Time</div>
                    <div class="sub-list-table-cell">
                      [[_nodeStatsFormattedComputeTime]]
                    </div>
                  </div>
                </template>
                <template is="dom-if" if="{{_nodeStats.outputSize}}">
                  <div class="sub-list-table-row">
                    <div class="sub-list-table-cell">Tensor Output Sizes</div>
                    <div class="sub-list-table-cell">
                      <template is="dom-repeat" items="{{_nodeStatsFormattedOutputSizes}}">
                        [[item]] <br>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>

          <template is="dom-if" if="[[_functionUsages.length]]">
            <div class="sub-list-group predecessors">
              Usages of the Function (<span>[[_functionUsages.length]]</span>)
              <iron-list class="sub-list" id="functionUsagesList" items="[[_functionUsages]]">
                <template>
                  <tf-node-list-item class="non-control-list-item" card-node="[[_node]]" item-node="[[item]]" name="[[item.name]]" item-type="functionUsages" color-by="[[colorBy]]" template-index="[[_templateIndex]]">
                  </tf-node-list-item>
                </template>
              </iron-list>
            </div>
          </template>

          <template is="dom-if" if="[[!_isLibraryFunction(_node)]]">
            <div class="toggle-include-group">
              <paper-button raised class="toggle-include" on-click="_toggleInclude">
                <span>[[_auxButtonText]]</span>
              </paper-button>
            </div>
          </template>

          <template is="dom-if" if="{{_isInSeries(_node)}}">
            <div class="toggle-include-group">
              <paper-button raised class="toggle-include" on-click="_toggleGroup">
                <span>[[_groupButtonText]]</span>
              </paper-button>
            </div>
          </template>
        </div>
      </template>
    </iron-collapse>
  </template>

  
</dom-module>


<dom-module id="tf-graph-info">
  <template>
    <style>
      :host {
        font-size: 12px;
        margin: 0;
        padding: 0;
        display: block;
        max-height: 650px;
        overflow-x: hidden;
        overflow-y: auto;
      }

      h2 {
        padding: 0;
        text-align: center;
        margin: 0;
      }
    </style>
    <template is="dom-if" if="{{selectedNode}}">
      <paper-material elevation="1" class="card">
        <tf-node-info graph-hierarchy="[[graphHierarchy]]" render-hierarchy="[[renderHierarchy]]" flat-graph="[[graph]]" node-name="[[selectedNode]]" node-include="[[selectedNodeInclude]]" highlighted-node="{{highlightedNode}}" color-by="[[colorBy]]">
        </tf-node-info>
      </paper-material>
    </template>
    <template is="dom-if" if="[[_equals(colorBy, 'op_compatibility')]]">
      <tf-graph-op-compat-card graph-hierarchy="[[graphHierarchy]]" hierarchy-params="[[hierarchyParams]]" render-hierarchy="[[renderHierarchy]]" color-by="[[colorBy]]" node-title="[[compatNodeTitle]]">
      </tf-graph-op-compat-card>
    </template>
    <template is="dom-if" if="[[_healthPillsAvailable(debuggerDataEnabled, nodeNamesToHealthPills)]]">
      <tf-graph-debugger-data-card render-hierarchy="[[renderHierarchy]]" debugger-numeric-alerts="[[debuggerNumericAlerts]]" node-names-to-health-pills="[[nodeNamesToHealthPills]]" selected-node="{{selectedNode}}" highlighted-node="{{highlightedNode}}" are-health-pills-loading="[[areHealthPillsLoading]]" all-steps-mode-enabled="{{allStepsModeEnabled}}" specific-health-pill-step="{{specificHealthPillStep}}" health-pill-step-index="{{healthPillStepIndex}}">
      </tf-graph-debugger-data-card>
    </template>
  </template>
  
</dom-module>




<dom-module id="tf-graph-board">
  <template>
    <style>
      ::host {
        display: block;
      }

      /deep/ .close {
        position: absolute;
        cursor: pointer;
        left: 15px;
        bottom: 15px;
      }

      .container {
        width: 100%;
        height: 100%;
        opacity: 1;
      }

      .container.loading {
        cursor: progress;
        opacity: 0.1;
      }

      .container.loading.error {
        cursor: auto;
      }

      #info {
        position: absolute;
        right: 5px;
        top: 5px;
        padding: 0px;
        max-width: 380px;
        min-width: 320px;
        background-color: rgba(255, 255, 255, 0.9);
        @apply --shadow-elevation-2dp;
      }

      #main {
        width: 100%;
        height: 100%;
      }

      #progress-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: absolute;
        top: 40px;
        left: 0;
        font-size: 13px;
      }

      #progress-msg {
        margin-bottom: 5px;
        white-space: pre-wrap;
        width: 400px;
      }

      paper-progress {
        width: 400px;
        --paper-progress-height: 6px;
        --paper-progress-active-color: #f3913e;
      }

      .context-menu {
        position: absolute;
        display: none;
        background-color: #e2e2e2;
        border-radius: 2px;
        font-size: 14px;
        min-width: 150px;
        border: 1px solid #d4d4d4;
      }

      /deep/ .context-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        cursor: default;
      }

      /deep/ .context-menu ul li {
        padding: 4px 16px;
      }

      /deep/ .context-menu ul li:hover {
        background-color: #f3913e;
        color: white;
      }
    </style>
    <template is="dom-if" if="[[_isNotComplete(progress)]]">
      <div id="progress-bar">
        <div id="progress-msg">[[progress.msg]]</div>
        <paper-progress value="[[progress.value]]"></paper-progress>
      </div>
    </template>
    <div class$="[[_getContainerClass(progress)]]">
      <div id="main">
        <tf-graph id="graph" graph-hierarchy="{{graphHierarchy}}" basic-graph="[[graph]]" hierarchy-params="[[hierarchyParams]]" render-hierarchy="{{renderHierarchy}}" devices-for-stats="[[devicesForStats]]" stats="[[stats]]" selected-node="{{selectedNode}}" highlighted-node="{{_highlightedNode}}" color-by="[[colorBy]]" color-by-params="{{colorByParams}}" progress="{{progress}}" edge-label-function="[[edgeLabelFunction]]" edge-width-function="[[edgeWidthFunction]]" node-names-to-health-pills="[[nodeNamesToHealthPills]]" health-pill-step-index="[[healthPillStepIndex]]" handle-node-selected="[[handleNodeSelected]]" handle-edge-selected="[[handleEdgeSelected]]" trace-inputs="[[traceInputs]]"></tf-graph>
      </div>
      <div id="info">
        <tf-graph-info id="graph-info" title="selected" graph-hierarchy="[[graphHierarchy]]" hierarchy-params="[[hierarchyParams]]" render-hierarchy="[[renderHierarchy]]" graph="[[graph]]" selected-node="{{selectedNode}}" selected-node-include="{{_selectedNodeInclude}}" highlighted-node="{{_highlightedNode}}" color-by="[[colorBy]]" color-by-params="[[colorByParams]]" debugger-data-enabled="[[debuggerDataEnabled]]" are-health-pills-loading="[[areHealthPillsLoading]]" debugger-numeric-alerts="[[debuggerNumericAlerts]]" node-names-to-health-pills="[[nodeNamesToHealthPills]]" all-steps-mode-enabled="{{allStepsModeEnabled}}" specific-health-pill-step="{{specificHealthPillStep}}" health-pill-step-index="{{healthPillStepIndex}}" compat-node-title="[[compatNodeTitle]]" on-node-toggle-inclusion="_onNodeInclusionToggled" on-node-toggle-seriesgroup="_onNodeSeriesGroupToggled"></tf-graph-info>
      </div>
    </div>
  </template>
</dom-module>























<dom-module id="paper-radio-button">
  <template strip-whitespace>
    <style>
      :host {
        display: inline-block;
        line-height: 0;
        white-space: nowrap;
        cursor: pointer;
        @apply --paper-font-common-base;
        --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px);
        /* -1px is a sentinel for the default and is replace in `attached`. */
        --calculated-paper-radio-button-ink-size: var(--paper-radio-button-ink-size, -1px);
      }

      :host(:focus) {
        outline: none;
      }

      #radioContainer {
        @apply --layout-inline;
        @apply --layout-center-center;
        position: relative;
        width: var(--calculated-paper-radio-button-size);
        height: var(--calculated-paper-radio-button-size);
        vertical-align: middle;

        @apply --paper-radio-button-radio-container;
      }

      #ink {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        width: var(--calculated-paper-radio-button-ink-size);
        height: var(--calculated-paper-radio-button-ink-size);
        color: var(--paper-radio-button-unchecked-ink-color, var(--primary-text-color));
        opacity: 0.6;
        pointer-events: none;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #ink[checked] {
        color: var(--paper-radio-button-checked-ink-color, var(--primary-color));
      }

      #offRadio, #onRadio {
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      #offRadio {
        border: 2px solid var(--paper-radio-button-unchecked-color, var(--primary-text-color));
        background-color: var(--paper-radio-button-unchecked-background-color, transparent);
        transition: border-color 0.28s;
      }

      #onRadio {
        background-color: var(--paper-radio-button-checked-color, var(--primary-color));
        -webkit-transform: scale(0);
        transform: scale(0);
        transition: -webkit-transform ease 0.28s;
        transition: transform ease 0.28s;
        will-change: transform;
      }

      :host([checked]) #offRadio {
        border-color: var(--paper-radio-button-checked-color, var(--primary-color));
      }

      :host([checked]) #onRadio {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }

      #radioLabel {
        line-height: normal;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-left: var(--paper-radio-button-label-spacing, 10px);
        white-space: normal;
        color: var(--paper-radio-button-label-color, var(--primary-text-color));

        @apply --paper-radio-button-label;
      }

      :host([checked]) #radioLabel {
        @apply --paper-radio-button-label-checked;
      }

      #radioLabel:dir(rtl) {
        margin-left: 0;
        margin-right: var(--paper-radio-button-label-spacing, 10px);
      }

      #radioLabel[hidden] {
        display: none;
      }

      /* disabled state */

      :host([disabled]) #offRadio {
        border-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
        opacity: 0.5;
      }

      :host([disabled][checked]) #onRadio {
        background-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
        opacity: 0.5;
      }

      :host([disabled]) #radioLabel {
        /* slightly darker than the button, so that it's readable */
        opacity: 0.65;
      }
    </style>

    <div id="radioContainer">
      <div id="offRadio"></div>
      <div id="onRadio"></div>
    </div>

    <div id="radioLabel"><slot></slot></div>
  </template>

  
</dom-module>




<dom-module id="paper-radio-group">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      :host ::slotted(*) {
        padding: var(--paper-radio-group-item-padding, 12px);
      }
    </style>

    <slot></slot>
  </template>
</dom-module>









<dom-module id="paper-tooltip">
  <template>
    <style>
      :host {
        display: block;
        position: absolute;
        outline: none;
        z-index: 1002;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: default;
      }

      #tooltip {
        display: block;
        outline: none;
        @apply --paper-font-common-base;
        font-size: 10px;
        line-height: 1;
        background-color: var(--paper-tooltip-background, #616161);
        color: var(--paper-tooltip-text-color, white);
        padding: 8px;
        border-radius: 2px;
        @apply --paper-tooltip;
      }

      @keyframes keyFrameScaleUp {
        0% {
          transform: scale(0.0);
        }
        100% {
          transform: scale(1.0);
        }
      }

      @keyframes keyFrameScaleDown {
        0% {
          transform: scale(1.0);
        }
        100% {
          transform: scale(0.0);
        }
      }

      @keyframes keyFrameFadeInOpacity {
        0% {
          opacity: 0;
        }
        100% {
          opacity: var(--paper-tooltip-opacity, 0.9);
        }
      }

      @keyframes keyFrameFadeOutOpacity {
        0% {
          opacity: var(--paper-tooltip-opacity, 0.9);
        }
        100% {
          opacity: 0;
        }
      }

      @keyframes keyFrameSlideDownIn {
        0% {
          transform: translateY(-2000px);
          opacity: 0;
        }
        10% {
          opacity: 0.2;
        }
        100% {
          transform: translateY(0);
          opacity: var(--paper-tooltip-opacity, 0.9);
        }
      }

      @keyframes keyFrameSlideDownOut {
        0% {
          transform: translateY(0);
          opacity: var(--paper-tooltip-opacity, 0.9);
        }
        10% {
          opacity: 0.2;
        }
        100% {
          transform: translateY(-2000px);
          opacity: 0;
        }
      }

      .fade-in-animation {
        opacity: 0;
        animation-delay: var(--paper-tooltip-delay-in, 500ms);
        animation-name: keyFrameFadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: var(--paper-tooltip-duration-in, 500ms);
        animation-fill-mode: forwards;
        @apply --paper-tooltip-animation;
      }

      .fade-out-animation {
        opacity: var(--paper-tooltip-opacity, 0.9);
        animation-delay: var(--paper-tooltip-delay-out, 0ms);
        animation-name: keyFrameFadeOutOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: var(--paper-tooltip-duration-out, 500ms);
        animation-fill-mode: forwards;
        @apply --paper-tooltip-animation;
      }

      .scale-up-animation {
        transform: scale(0);
        opacity: var(--paper-tooltip-opacity, 0.9);
        animation-delay: var(--paper-tooltip-delay-in, 500ms);
        animation-name: keyFrameScaleUp;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: var(--paper-tooltip-duration-in, 500ms);
        animation-fill-mode: forwards;
        @apply --paper-tooltip-animation;
      }

      .scale-down-animation {
        transform: scale(1);
        opacity: var(--paper-tooltip-opacity, 0.9);
        animation-delay: var(--paper-tooltip-delay-out, 500ms);
        animation-name: keyFrameScaleDown;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: var(--paper-tooltip-duration-out, 500ms);
        animation-fill-mode: forwards;
        @apply --paper-tooltip-animation;
      }

      .slide-down-animation {
        transform: translateY(-2000px);
        opacity: 0;
        animation-delay: var(--paper-tooltip-delay-out, 500ms);
        animation-name: keyFrameSlideDownIn;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
        animation-duration: var(--paper-tooltip-duration-out, 500ms);
        animation-fill-mode: forwards;
        @apply --paper-tooltip-animation;
      }

      .slide-down-animation-out {
        transform: translateY(0);
        opacity: var(--paper-tooltip-opacity, 0.9);
        animation-delay: var(--paper-tooltip-delay-out, 500ms);
        animation-name: keyFrameSlideDownOut;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
        animation-duration: var(--paper-tooltip-duration-out, 500ms);
        animation-fill-mode: forwards;
        @apply --paper-tooltip-animation;
      }

      .cancel-animation {
        animation-delay: -30s !important;
      }

      /* Thanks IE 10. */

      .hidden {
        display: none !important;
      }
    </style>

    <div id="tooltip" class="hidden">
      <slot></slot>
    </div>
  </template>

  
</dom-module>










<dom-module id="tf-graph-node-search">
  <template>
    <div id="search-container">
      <paper-input id="runs-regex" label="Search nodes. Regexes supported." value="{{_rawRegexInput}}">
      </paper-input>
      <div id="search-results-anchor">
        <div id="search-results">
          <template is="dom-repeat" items="[[_regexMatches]]">
            <div id="search-match" on-click="_matchClicked">[[item]]</div>
          </template>
        </div>
      </div>
    </div>
    <style>
      #search-container {
        width: 100%;
        overflow: visible;
      }

      #runs-regex {
        width: 100%;
      }

      #search-results-anchor {
        position: relative;
      }

      #search-results {
        color: #fff;
        position: absolute;
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: right;
        max-width: 100%;
        box-sizing: border-box;
      }

      #search-match {
        background: var(--tb-orange-strong);
        padding: 3px;
        float: right;
        width: 100%;
        box-sizing: border-box;
        direction: rtl;
      }

      #search-match:hover {
        background: var(--tb-orange-weak);
        cursor: pointer;
      }
    </style>
  </template>
  
</dom-module>


<dom-module id="tf-graph-controls">
  <template>
    <style>
      :host {
        color: gray;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        width: 100%;
      }

      paper-dropdown-menu {
        --paper-dropdown-menu-input: {
          padding: 0;
          color: gray;
        }
        --iron-icon-width: 15px;
        --iron-icon-height: 15px;
        --primary-text-color: gray;
        --paper-item-min-height: 30px;
      }

      paper-button[raised].keyboard-focus {
        font-weight: normal;
      }

      .run-dropdown {
        --paper-input-container: {
          padding: 8px 0 8px 10px;
        }
      }

      .color-dropdown {
        --paper-input-container: {
          padding: 9px 0 0 13px;
        }
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
      }

      table td {
        padding: 0;
        margin: 0;
      }

      .allcontrols {
        padding: 0 20px 20px;
        flex-grow: 1;
        overflow-y: auto;
      }

      .legend-holder {
        background: #e9e9e9;
        border-top: 1px solid #ccc;
        box-sizing: border-box;
        color: #555;
        padding: 15px 20px;
        width: 100%;
      }

      .toggle-legend-button {
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .toggle-legend-text {
        vertical-align: middle;
      }

      paper-radio-button {
        display: block;
        padding: 5px;
      }
      svg.icon,
      tf-graph-icon {
        width: 60px;
        height: 18px;
      }
      .domainValues {
        margin-bottom: 10px;
        width: 165px;
      }
      .domainStart {
        float: left;
      }
      .domainEnd {
        float: right;
      }
      .colorBox {
        width: 20px;
      }

      .image-icon {
        width: 24px;
        height: 24px;
      }

      .help-icon {
        height: 15px;
        margin: 0;
        padding: 0;
      }

      .gray {
        color: #666;
      }

      .title {
        font-size: 16px;
        margin: 8px 5px 8px 0;
        color: black;
      }
      .title small {
        font-weight: normal;
      }
      .deviceList,
      .xlaClusterList {
        max-height: 200px;
        overflow-y: auto;
      }

      #file {
        padding: 8px 0;
      }

      .color-legend-row {
        align-items: center;
        clear: both;
        display: flex;
        height: 20px;
        margin-top: 5px;
      }

      .color-legend-row .label,
      .color-legend-row svg,
      .color-legend-row tf-graph-icon {
        flex: 0 0 40px;
        margin-right: 20px;
      }

      .devices-checkbox input {
        text-align: left;
        vertical-align: middle;
      }

      .control-holder .icon-button {
        font-size: 14px;
        margin: 0 -5px;
        padding: 5px;
      }

      .button-text {
        padding-left: 20px;
        text-transform: none;
      }

      .upload-button {
        width: 165px;
        height: 25px;
        text-transform: none;
        margin-top: 4px;
      }

      .button-icon {
        width: 26px;
        height: 26px;
        color: var(--paper-orange-500);
      }

      .hidden-input {
        height: 0px;
        width: 0px;
        overflow: hidden;
      }

      .allcontrols .control-holder {
        clear: both;
        display: flex;
        justify-content: space-between;
      }

      .allcontrols .control-holder paper-radio-group {
        margin-top: 5px;
      }

      span.counter {
        font-size: 13px;
        color: gray;
      }

      .runs paper-item {
        --paper-item: {
          white-space: nowrap;
        }
      }

      table.control-holder {
        border: 0;
        border-collapse: collapse;
      }

      table.tf-graph-controls td.input-element-table-data {
        padding: 0 0 0 20px;
      }

      .spacer {
        flex-grow: 1;
      }

      .color-text {
        overflow: hidden;
      }

      /** Override inline styles that suppress pointer events for disabled buttons. Otherwise, the */
      /*  tooltips do not appear. */
      paper-radio-group paper-radio-button {
        pointer-events: auto !important;
      }

      .legend-clarifier {
        color: #266236;
        cursor: help;
        display: inline-block;
        text-decoration: underline;
      }

      .legend-clarifier paper-tooltip {
        width: 150px;
      }

      /** Otherwise, polymer UI controls appear atop node search. */
      tf-graph-node-search {
        z-index: 1;
        width: 100%;
      }

      paper-dropdown-menu {
        flex-grow: 1;
      }
    </style>

    <div class="allcontrols">
      <div class="control-holder">
        <tf-graph-node-search selected-node="{{selectedNode}}" render-hierarchy="[[renderHierarchy]]"></tf-graph-node-search>
      </div>
      <div class="control-holder">
        <paper-button class="icon-button" on-tap="_fit" alt="Fit to screen">
          <iron-icon icon="aspect-ratio" class="button-icon"></iron-icon>
          <span class="button-text">Fit to Screen</span>
        </paper-button>
      </div>
      <div class="control-holder">
        <paper-button class="icon-button" on-click="download" alt="Download PNG">
          <iron-icon icon="file-download" class="button-icon"></iron-icon>
          <span class="button-text">Download PNG</span>
        </paper-button>
        <a href="#" id="graphdownload" class="title" download="graph.png"></a>
      </div>
      <div class="control-holder runs">
        <div class="title">
          Run <span class="counter">([[datasets.length]])</span>
        </div>
        <paper-dropdown-menu no-label-float no-animations noink horizontal-align="left" class="run-dropdown">
          <paper-listbox class="dropdown-content" selected="{{_selectedRunIndex}}" slot="dropdown-content">
            <template is="dom-repeat" items="[[datasets]]">
              <paper-item>[[item.name]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>
      <template is="dom-if" if="[[showSessionRunsDropdown]]">
        <div class="control-holder">
          <div class="title">
            Tag
            <span class="counter">([[_numTags(datasets, _selectedRunIndex)]])</span>
          </div>
          <paper-dropdown-menu no-label-float no-animations horizontal-align="left" noink class="run-dropdown">
            <paper-listbox class="dropdown-content" selected="{{_selectedTagIndex}}" slot="dropdown-content">
              <template is="dom-repeat" items="[[_getTags(datasets, _selectedRunIndex)]]">
                <paper-item>[[item.displayName]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </template>
      <template is="dom-if" if="[[showUploadButton]]">
        <div class="control-holder">
          <div class="title">Upload</div>
          <paper-button raised class="upload-button" on-click="_getFile" title="Upload a graph pbtxt file to view the graph">
            Choose File
          </paper-button>
          <div class="hidden-input">
            <input type="file" id="file" name="file" on-change="_updateFileInput" accept=".pbtxt">
          </div>
        </div>
      </template>
      <div class="control-holder">
        <paper-radio-group selected="{{_selectedGraphType}}">
          
          <paper-radio-button name="op_graph" disabled="[[_getSelectionOpGraphDisabled(datasets, _selectedRunIndex, _selectedTagIndex)]]">Graph</paper-radio-button>
          <paper-radio-button name="conceptual_graph" disabled="[[_getSelectionConceptualGraphDisabled(datasets, _selectedRunIndex, _selectedTagIndex)]]">Conceptual Graph</paper-radio-button>
          <paper-radio-button name="profile" disabled="[[_getSelectionProfileDisabled(datasets, _selectedRunIndex, _selectedTagIndex)]]">Profile</paper-radio-button>
        </paper-radio-group>
      </div>
      <div class="control-holder">
        <div>
          <paper-toggle-button checked="{{traceInputs}}" class="title">
            Trace inputs
          </paper-toggle-button>
        </div>
      </div>
      <template is="dom-if" if="[[healthPillsFeatureEnabled]]">
        <div class="control-holder">
          <paper-toggle-button checked="{{healthPillsToggledOn}}" class="title">Show health pills</paper-toggle-button>
        </div>
      </template>
      <div class="control-holder">
        <div class="title">Color</div>
        <paper-radio-group selected="{{colorBy}}">
          <paper-radio-button name="structure">Structure</paper-radio-button>

          <paper-radio-button name="device">Device</paper-radio-button>

          <paper-radio-button id="xla-cluster-radio-button" name="xla_cluster" disabled="[[!_xlaClustersProvided(renderHierarchy)]]">
            XLA Cluster
          </paper-radio-button>
          <paper-tooltip animation-delay="0" for="xla-cluster-radio-button" position="right" offset="0">
            Coloring by XLA cluster is only enabled if at least 1 op specifies
            an XLA cluster.
          </paper-tooltip>

          <paper-radio-button id="compute-time-radio-button" name="compute_time" disabled="[[!stats]]">
            Compute time
          </paper-radio-button>
          <paper-tooltip animation-delay="0" for="compute-time-radio-button" position="right" offset="0">
            Coloring by compute time is only enabled if the RunMetadata proto is
            passed to the FileWriter when a specific session is run.
          </paper-tooltip>

          <paper-radio-button id="memory-radio-button" name="memory" disabled="[[!stats]]">
            Memory
          </paper-radio-button>
          <paper-tooltip animation-delay="0" for="memory-radio-button" position="right" offset="0">
            Coloring by memory is only enabled if the RunMetadata proto is
            passed to the FileWriter when a specific session is run.
          </paper-tooltip>

          <paper-radio-button id="tpu-compatibility-radio-button" name="op_compatibility">
            TPU Compatibility
          </paper-radio-button>
          <paper-tooltip animation-delay="0" for="tpu-compatibility-radio-button" position="right" offset="0">
            Coloring by whether an operation is compatible for the TPU device.
          </paper-tooltip>
        </paper-radio-group>
        <span class="spacer"></span>
      </div>
      <div>
        <template is="dom-if" if="[[_isGradientColoring(stats, colorBy)]]">
          <svg width="140" height="20" style="margin: 0 5px" class="color-text">
            <defs>
              <lineargradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop class="start" offset="0%" stop-color$="[[_currentGradientParams.startColor]]" />
                <stop class="end" offset="100%" stop-color$="[[_currentGradientParams.endColor]]" />
              </lineargradient>
            </defs>
            <rect x="0" y="0" width="135" height="20" fill="url(#linearGradient)" stroke="black" />
          </svg>
          <div class="domainValues color-text">
            <div class="domainStart">[[_currentGradientParams.minValue]]</div>
            <div class="domainEnd">[[_currentGradientParams.maxValue]]</div>
          </div>
          <br style="clear: both">
          <div>Devices included in stats:</div>
          <div class="deviceList">
            <template is="dom-repeat" items="[[_currentDevices]]">
              <div class="color-legend-row devices-checkbox">
                <span><input type="checkbox" value$="[[item.device]]" checked$="[[item.used]]" on-click="_deviceCheckboxClicked"></span>
                <span>[[item.suffix]]</span>
                <template is="dom-if" if="[[item.ignoredMsg]]">
                  <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
                  <paper-tooltip position="right" offset="0" animation-delay="0">[[item.ignoredMsg]]</paper-tooltip>
                </template>
              </div>
            </template>
          </div>
        </template>
        <template is="dom-if" if="[[_equals(colorBy, 'structure')]]">
          <div class="color-text">
            <div class="color-legend-row">
              <span class="label">
                colors
              </span>
              <span class="color-legend-value">same substructure</span>
            </div>
            <div class="color-legend-row">
              <tf-graph-icon type="META" height="16" fill-override="#eee" stroke-override="#a6a6a6"></tf-graph-icon>
              <span class="color-legend-value">unique substructure</span>
            </div>
          </div>
        </template>
        <template is="dom-if" if="[[_equals(colorBy, 'device')]]">
          <div>
            <template is="dom-repeat" items="[[_currentDeviceParams]]">
              <div class="color-legend-row">
                <tf-graph-icon type="META" height="16" fill-override="[[item.color]]" stroke-override="#a6a6a6"></tf-graph-icon>
                <span class="color-legend-value">[[item.device]]</span>
              </div>
            </template>
            <div class="color-legend-row">
              <tf-graph-icon type="META" height="16" fill-override="#eee" stroke-override="#a6a6a6"></tf-graph-icon>
              <span class="color-legend-value">unknown device</span>
            </div>
          </div>
        </template>
        <template is="dom-if" if="[[_equals(colorBy, 'xla_cluster')]]">
          <div>
            <template is="dom-repeat" items="[[_currentXlaClusterParams]]">
              <div class="color-legend-row">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#unfilled-rect" x="0" y="0" style="fill:[[item.color]]" />
                </svg>
                <span class="color-legend-value">[[item.xla_cluster]]</span>
              </div>
            </template>
            <div class="color-legend-row">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#grey-rect" x="0" y="0" />
              </svg>
              <span class="color-legend-value">unknown XLA cluster</span>
            </div>
          </div>
        </template>
        <template is="dom-if" if="[[_equals(colorBy, 'op_compatibility')]]">
          <div class="color-text">
            <div class="color-legend-row">
              <tf-graph-icon type="OP" height="16" fill-override="#0f9d58" stroke-override="#ccc"></tf-graph-icon>
              <span class="color-legend-value">Valid Op</span>
            </div>
            <div class="color-legend-row">
              <tf-graph-icon type="OP" height="16" fill-override="#db4437" stroke-override="#ccc"></tf-graph-icon>
              <span class="color-legend-value">Invalid Op</span>
            </div>
          </div>
        </template>
        <template is="dom-if" if="[[_statsNotNull(stats)]]">
          <div class="color-legend-row">
            <tf-graph-icon type="META" height="16" faded></tf-graph-icon>
            <span class="color-legend-value">unused substructure</span>
          </div>
        </template>
      </div>
    </div>
    <div class="legend-holder">
      <paper-icon-button icon="[[_getToggleLegendIcon(_legendOpened)]]" on-click="_toggleLegendOpen" class="toggle-legend-button">
      </paper-icon-button>
      <span class="toggle-legend-text">
        [[_getToggleText(_legendOpened)]]
      </span>
      <iron-collapse opened="[[_legendOpened]]">
        <div>
          <table>
            <tr>
              <td><div class="title">Graph</div></td>
              <td>(* = expandable)</td>
            </tr>
            <tr>
              <td>
                <tf-graph-icon type="META" height="16" fill-override="#d9d9d9" stroke-override="#ccc"></tf-graph-icon>
              </td>
              <td>
                Namespace<span class="gray">*</span>
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Encapsulates a set of nodes. Namespace is hierarchical and
                    based on scope.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <tf-graph-icon type="OP" height="16"></tf-graph-icon>
              </td>
              <td>
                OpNode
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Node that performs an operation. These nodes cannot expand.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <tf-graph-icon type="SERIES" height="16"></tf-graph-icon>
              </td>
              <td>
                Unconnected series<span class="gray">*</span>
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Sequence of numbered nodes that are not connected to each
                    other.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <tf-graph-icon type="SERIES" height="16" vertical></tf-graph-icon>
              </td>
              <td>
                Connected series<span class="gray">*</span>
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Sequence of numbered nodes that are connected to each other.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <svg class="icon">
                  <circle fill="white" stroke="#848484" cx="10" cy="10" r="5" />
                </svg>
              </td>
              <td>
                Constant
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Node that outputs a constant value.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <tf-graph-icon type="SUMMARY" height="20"></tf-graph-icon>
              </td>
              <td>
                Summary
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Node that collects data for visualization within
                    TensorBoard.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <svg class="icon" height="15px" preserveaspectratio="xMinYMid meet" viewbox="0 0 15 15">
                  <defs>
                    <marker id="dataflow-arrowhead-legend" fill="#bbb" markerwidth="10" markerheight="10" refx="9" refy="5" orient="auto-start-reverse">
                      <path d="M 0,0 L 10,5 L 0,10 C 3,7 3,3 0,0" />
                    </marker>
                  </defs>
                  <path marker-end="url(#dataflow-arrowhead-legend)" stroke="#bbb" d="M2 9 l 29 0" stroke-linecap="round" />
                </svg>
              </td>
              <td>
                Dataflow edge
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Edge showing the data flow between operations. Edges flow
                    upwards unless arrowheads specify otherwise.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <svg class="icon" height="15px" preserveaspectratio="xMinYMid meet" viewbox="0 0 15 15">
                  <path stroke="#bbb" d="M2 9 l 29 0" stroke-linecap="round" stroke-dasharray="2, 2" />
                </svg>
              </td>
              <td>
                Control dependency edge
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Edge showing the control dependency between operations.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <svg class="icon" height="15px" preserveaspectratio="xMinYMid meet" viewbox="0 0 15 15">
                  <defs>
                    <marker id="reference-arrowhead-legend" fill="#FFB74D" markerwidth="10" markerheight="10" refx="9" refy="5" orient="auto-start-reverse">
                      <path d="M 0,0 L 10,5 L 0,10 C 3,7 3,3 0,0" />
                    </marker>
                  </defs>
                  <path marker-end="url(#reference-arrowhead-legend)" stroke="#FFB74D" d="M2 9 l 29 0" stroke-linecap="round" />
                </svg>
              </td>
              <td>
                Reference edge
                <div class="legend-clarifier">
                  <span>?</span>
                  <paper-tooltip animation-delay="0" position="right" offset="0">
                    Edge showing that the outgoing operation node can mutate the
                    incoming tensor.
                  </paper-tooltip>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </iron-collapse>
    </div>
  </template>
</dom-module>















<dom-module id="tf-graph-dashboard">
  <template>
    <paper-dialog id="error-dialog" with-backdrop></paper-dialog>
    <template is="dom-if" if="[[_datasetsState(_datasetsFetched, _datasets, 'EMPTY')]]">
      <div style="max-width: 540px; margin: 80px auto 0 auto;">
        <h3>No graph definition files were found.</h3>
        <p>
          To store a graph, create a
          <code>tf.summary.FileWriter</code>
          and pass the graph either via the constructor, or by calling its
          <code>add_graph()</code> method. You may want to check out the
          <a href="https://www.tensorflow.org/get_started/graph_viz">graph visualizer tutorial</a>.
        

        <p>
          If you’re new to using TensorBoard, and want to find out how to add
          data and set up your event files, check out the
          <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
          and perhaps the
          <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
        

        <p>
          If you think TensorBoard is configured properly, please see
          <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
          and consider filing an issue on GitHub.
        
      </div>
    </template>
    <template is="dom-if" if="[[!_datasetsState(datasetsFetched, _datasets, 'PRESENT')]]">
      <tf-dashboard-layout>
        <tf-graph-controls id="controls" class="sidebar" slot="sidebar" devices-for-stats="{{_devicesForStats}}" color-by-params="[[_colorByParams]]" stats="[[_stats]]" color-by="{{_colorBy}}" datasets="[[_datasets]]" render-hierarchy="[[_renderHierarchy]]" selection="{{_selection}}" selected-file="{{_selectedFile}}" selected-node="{{_selectedNode}}" health-pills-feature-enabled="[[_debuggerDataEnabled]]" health-pills-toggled-on="{{healthPillsToggledOn}}" on-fit-tap="_fit" trace-inputs="{{_traceInputs}}"></tf-graph-controls>
        <div class="center" slot="center">
          <tf-graph-dashboard-loader id="loader" datasets="[[_datasets]]" selection="[[_selection]]" selected-file="[[_selectedFile]]" out-graph-hierarchy="{{_graphHierarchy}}" out-graph="{{_graph}}" out-stats="{{_stats}}" progress="{{_progress}}" hierarchy-params="[[_hierarchyParams]]" compatibility-provider="[[_compatibilityProvider]]"></tf-graph-dashboard-loader>
          <tf-graph-board id="graphboard" devices-for-stats="[[_devicesForStats]]" color-by="[[_colorBy]]" color-by-params="{{_colorByParams}}" graph-hierarchy="[[_graphHierarchy]]" graph="[[_graph]]" hierarchy-params="[[_hierarchyParams]]" progress="[[_progress]]" debugger-data-enabled="[[_debuggerDataEnabled]]" are-health-pills-loading="[[_areHealthPillsLoading]]" debugger-numeric-alerts="[[_debuggerNumericAlerts]]" node-names-to-health-pills="[[_nodeNamesToHealthPills]]" all-steps-mode-enabled="{{allStepsModeEnabled}}" specific-health-pill-step="{{specificHealthPillStep}}" health-pill-step-index="[[_healthPillStepIndex]]" render-hierarchy="{{_renderHierarchy}}" selected-node="{{_selectedNode}}" stats="[[_stats]]" trace-inputs="[[_traceInputs]]"></tf-graph-board>
        </div>
      </tf-dashboard-layout>
    </template>
    <style>
      :host /deep/ {
        font-family: 'Roboto', sans-serif;
      }

      .sidebar {
        display: flex;
        height: 100%;
      }

      .center {
        position: relative;
        height: 100%;
      }

      paper-dialog {
        padding: 20px;
      }
    </style>
  </template>
</dom-module>



























<dom-module id="vz-distribution-chart">
  <template>
    <style include="plottable-style"></style>
    <div id="chartdiv"></div>
    <style>
      :host {
        -webkit-user-select: none;
        -moz-user-select: none;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        position: relative;
      }
      #chartdiv {
        -webkit-user-select: none;
        -moz-user-select: none;
        flex-grow: 1;
        flex-shrink: 1;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-distribution-loader">
  <template>
    <tf-card-heading tag="[[tag]]" run="[[run]]" display-name="[[tagMetadata.displayName]]" description="[[tagMetadata.description]]" color="[[_runColor]]"></tf-card-heading>
    
    <vz-distribution-chart id="chart" x-type="[[xType]]" color-scale="[[_colorScale]]"></vz-distribution-chart>
    <div style="display: flex; flex-direction: row;">
      <paper-icon-button selected$="[[_expanded]]" icon="fullscreen" on-tap="_toggleExpanded"></paper-icon-button>
    </div>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        width: 330px;
        height: 235px;
        margin-right: 10px;
        margin-bottom: 15px;
      }
      :host([_expanded]) {
        width: 700px;
        height: 500px;
      }

      vz-histogram-timeseries {
        -moz-user-select: none;
        -webkit-user-select: none;
      }

      paper-icon-button {
        color: #2196f3;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        padding: 4px;
      }
      paper-icon-button[selected] {
        background: var(--tb-ui-light-accent);
      }

      tf-card-heading {
        margin-bottom: 10px;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-distribution-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <tf-option-selector id="xTypeSelector" name="Horizontal axis" selected-id="{{_xType}}">
            <paper-button id="step">step</paper-button>
            <paper-button id="relative">relative</paper-button>
            <paper-button id="wall_time">wall</paper-button>
          </tf-option-selector>
        </div>
        <div class="sidebar-section">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>

      <div class="center" slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No distribution data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>
                You haven’t written any histogram data to your event files.
                (Histograms and distributions both use the histogram summary
                operation.)
              </li>

              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]">
              <template>
                <tf-distribution-loader active="[[active]]" run="[[item.run]]" tag="[[item.tag]]" tag-metadata="[[_tagMetadata(_runToTagInfo, item.run, item.tag)]]" x-type="[[_xType]]" request-manager="[[_requestManager]]"></tf-distribution-loader>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
    </style>
  </template>

  
</dom-module>

























<dom-module id="vz-histogram-timeseries">
  <template>
    <div id="tooltip"><span></span></div>
    <svg id="svg">
      <g>
        <g class="axis x"></g>
        <g class="axis y"></g>
        <g class="axis y slice"></g>
        <g class="stage">
          <rect class="background"></rect>
        </g>
        <g class="x-axis-hover"></g>
        <g class="y-axis-hover"></g>
        <g class="y-slice-axis-hover"></g>
      </g>
    </svg>

    <style>
      :host {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        position: relative;
      }

      svg {
        font-family: roboto, sans-serif;
        overflow: visible;
        display: block;
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
      }

      #tooltip {
        position: absolute;
        display: block;
        opacity: 0;
        font-weight: bold;
        font-size: 11px;
      }

      .background {
        fill-opacity: 0;
        fill: red;
      }

      .histogram {
        pointer-events: none;
      }

      .hover {
        font-size: 9px;
        dominant-baseline: middle;
        opacity: 0;
      }

      .hover circle {
        stroke: white;
        stroke-opacity: 0.5;
        stroke-width: 1px;
      }

      .hover text {
        fill: black;
        opacity: 0;
      }

      .hover.hover-closest circle {
        fill: black !important;
      }

      .hover.hover-closest text {
        opacity: 1;
      }

      .baseline {
        stroke: black;
        stroke-opacity: 0.1;
      }

      .outline {
        fill: none;
        stroke: white;
        stroke-opacity: 0.5;
      }

      .outline.outline-hover {
        stroke: black !important;
        stroke-opacity: 1;
      }

      .x-axis-hover,
      .y-axis-hover,
      .y-slice-axis-hover {
        pointer-events: none;
      }

      .x-axis-hover .label,
      .y-axis-hover .label,
      .y-slice-axis-hover .label {
        opacity: 0;
        font-weight: bold;
        font-size: 11px;
        text-anchor: end;
      }

      .x-axis-hover text {
        text-anchor: middle;
      }

      .y-axis-hover text,
      .y-slice-axis-hover text {
        text-anchor: start;
      }

      .x-axis-hover line,
      .y-axis-hover line,
      .y-slice-axis-hover line {
        stroke: black;
      }

      .x-axis-hover rect,
      .y-axis-hover rect,
      .y-slice-axis-hover rect {
        fill: white;
      }

      .axis {
        font-size: 11px;
      }

      .axis path.domain {
        fill: none;
      }

      .axis .tick line {
        stroke: #ddd;
      }

      .axis.slice {
        opacity: 0;
      }

      .axis.slice .tick line {
        stroke-dasharray: 2;
      }

      .small .axis text {
        display: none;
      }
      .small .axis .tick:first-of-type text {
        display: block;
      }
      .small .axis .tick:last-of-type text {
        display: block;
      }
      .medium .axis text {
        display: none;
      }
      .medium .axis .tick:nth-child(2n + 1) text {
        display: block;
      }
      .large .axis text {
        display: none;
      }
      .large .axis .tick:nth-child(2n + 1) text {
        display: block;
      }
    </style>
  </template>

  
</dom-module>







<dom-module id="tf-histogram-loader">
  <template>
    <tf-card-heading tag="[[tag]]" run="[[run]]" display-name="[[tagMetadata.displayName]]" description="[[tagMetadata.description]]" color="[[_runColor]]"></tf-card-heading>
    
    <vz-histogram-timeseries id="chart" time-property="[[timeProperty]]" mode="[[histogramMode]]" color-scale="[[_colorScaleFunction]]"></vz-histogram-timeseries>
    <div style="display: flex; flex-direction: row;">
      <paper-icon-button selected$="[[_expanded]]" icon="fullscreen" on-tap="_toggleExpanded"></paper-icon-button>
    </div>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        width: 330px;
        height: 235px;
        margin-right: 10px;
        margin-bottom: 15px;
      }
      :host([_expanded]) {
        width: 700px;
        height: 500px;
      }

      vz-histogram-timeseries {
        -moz-user-select: none;
        -webkit-user-select: none;
        will-change: transform;
      }

      paper-icon-button {
        color: #2196f3;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        padding: 4px;
      }

      paper-icon-button[selected] {
        background: var(--tb-ui-light-accent);
      }

      tf-card-heading {
        margin-bottom: 10px;
        width: 90%;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-histogram-dashboard">
  <template>
    <tf-dashboard-layout>
      <div slot="sidebar">
        <div class="sidebar-section">
          <tf-option-selector id="histogramModeSelector" name="Histogram mode" selected-id="{{_histogramMode}}">
            <paper-button id="overlay">overlay</paper-button>
            <paper-button id="offset">offset</paper-button>
          </tf-option-selector>
        </div>
        <div class="sidebar-section">
          <tf-option-selector id="timePropertySelector" name="Offset time axis" selected-id="{{_timeProperty}}">
            <paper-button id="step">step</paper-button>
            <paper-button id="relative">relative</paper-button>
            <paper-button id="wall_time">wall</paper-button>
          </tf-option-selector>
        </div>
        <div class="sidebar-section">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>
      <div slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No histogram data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>
                You haven’t written any histogram data to your event files.
              </li>
              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]">
              <template>
                <tf-histogram-loader run="[[item.run]]" tag="[[item.tag]]" active="[[active]]" tag-metadata="[[_tagMetadata(_runToTagInfo, item.run, item.tag)]]" time-property="[[_timeProperty]]" histogram-mode="[[_histogramMode]]" request-manager="[[_requestManager]]"></tf-histogram-loader>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
    </style>
  </template>

  
</dom-module>























<dom-module id="tf-text-loader">
  <template>
    <tf-card-heading run="[[run]]" tag="[[tag]]" color="[[_runColor]]">
    </tf-card-heading>
    <paper-material elevation="1" id="steps-container" class="container scrollbar" style="border-color: [[_runColor]]">
      <template is="dom-repeat" items="[[_texts]]">
        <paper-material elevation="1" class="step-container">
          step <span class="step-value">[[_formatStep(item.step)]]</span>
        </paper-material>
        <paper-material elevation="1" class="text">
          <tf-markdown-view html="[[item.text]]"></tf-markdown-view>
        </paper-material>
      </template>
    </paper-material>
    <style include="scrollbar-style"></style>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin-right: 10px;
        margin-bottom: 15px;
      }
      .scrollbar {
        will-change: transform;
      }
      #steps-container {
        border-radius: 3px;
        border: 2px solid /* color computed and set as inline style */;
        display: block;
        max-height: 500px;
        overflow: auto;
        padding: 10px;
      }
      .text {
        background-color: white;
        border-radius: 0 3px 3px 3px;
        padding: 5px;
        word-break: break-word;
      }
      .step-container {
        background-color: var(--tb-ui-light-accent);
        border-bottom: none;
        border-radius: 3px 3px 0 0;
        border: 1px solid #ccc;
        display: inline-block;
        font-size: 12px;
        font-style: italic;
        margin-left: -1px; /* to correct for border */
        padding: 3px;
      }
      .step-container:not(:first-child) {
        margin-top: 15px;
      }

      tf-card-heading {
        margin-bottom: 10px;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-text-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>
      <div class="center" slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No text data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>You haven’t written any text data to your event files.</li>
              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]">
              <template>
                <tf-text-loader active="[[active]]" tag="[[item.tag]]" run="[[item.run]]" request-manager="[[_requestManager]]"></tf-text-loader>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>
    <style include="dashboard-style"></style>
    <style>
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
    </style>
  </template>
  
</dom-module>

























<dom-module id="tf-pr-curve-card">
  <template>
    <tf-card-heading tag="[[tag]]" display-name="[[tagMetadata.displayName]]" description="[[tagMetadata.description]]"></tf-card-heading>

    <tf-line-chart-data-loader x-components-creation-method="[[_xComponentsCreationMethod]]" y-value-accessor="[[_yValueAccessor]]" tooltip-columns="[[_tooltipColumns]]" color-scale="[[_colorScaleFunction]]" default-x-range="[[_defaultXRange]]" default-y-range="[[_defaultYRange]]" smoothing-enabled="[[_smoothingEnabled]]" request-manager="[[requestManager]]" data-to-load="[[runs]]" data-series="[[runs]]" load-key="[[tag]]" get-data-load-url="[[_dataUrl]]" load-data-callback="[[_createProcessDataFunction()]]" active="[[active]]"></tf-line-chart-data-loader>

    <div id="buttons-row">
      <paper-icon-button selected$="[[_expanded]]" icon="fullscreen" on-tap="_toggleExpanded"></paper-icon-button>
      <paper-icon-button icon="settings-overscan" on-tap="_resetDomain" title="Reset axes to [0, 1]."></paper-icon-button>
    </div>

    <div id="step-legend">
      <template is="dom-repeat" items="[[_runsWithStepAvailable]]" as="run">
        <div class="legend-row">
          <div class="color-box" style="background: [[_computeRunColor(run)]];"></div>
          [[run]] is at
          <span class="step-label-text">
            step [[_computeCurrentStepForRun(_runToPrCurveEntry, run)]] </span><br>
          <span class="wall-time-label-text">
            ([[_computeCurrentWallTimeForRun(_runToPrCurveEntry, run)]])
          </span>
        </div>
      </template>
    </div>

    <style>
      :host {
        display: flex;
        flex-direction: column;
        width: 500px;
        margin-right: 10px;
        margin-bottom: 25px;
      }
      :host([_expanded]) {
        width: 100%;
      }
      tf-line-chart-data-loader {
        height: 300px;
        position: relative;
      }
      :host([_expanded]) tf-line-chart-data-loader {
        height: 600px;
      }
      #buttons-row {
        display: flex;
        flex-direction: row;
      }
      #buttons-row paper-icon-button {
        color: #2196f3;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        padding: 4px;
      }
      #buttons-row paper-icon-button[selected] {
        background: var(--tb-ui-light-accent);
      }
      #step-legend {
        box-sizing: border-box;
        font-size: 0.8em;
        max-height: 200px;
        overflow-y: auto;
        padding: 0 0 0 10px;
        width: 100%;
      }
      .legend-row {
        margin: 5px 0 5px 0;
        width: 100%;
      }
      .color-box {
        display: inline-block;
        border-radius: 1px;
        width: 10px;
        height: 10px;
      }
      .step-label-text {
        font-weight: bold;
      }
      .wall-time-label-text {
        color: #888;
        font-size: 0.8em;
      }
    </style>
  </template>
  
</dom-module>








<dom-module id="tf-pr-curve-steps-selector">
  <template>
    <template is="dom-repeat" items="[[_runsWithSliders]]" as="run">
      <div class="run-widget">
        <div class="run-display-container">
          <div class="run-color-box" style="background:[[_computeColorForRun(run)]];"></div>
          <div class="run-text">
            [[run]]
          </div>
        </div>
        <div class="step-display-container">
          [[_computeTimeTextForRun(runToAvailableTimeEntries, _runToStepIndex,
          run, timeDisplayType)]]
        </div>
        <paper-slider data-run$="[[run]]" step="1" type="number" min="0" max="[[_computeMaxStepIndexForRun(runToAvailableTimeEntries, run)]]" value="[[_getStep(_runToStepIndex, run)]]" on-immediate-value-changed="_sliderValueChanged"></paper-slider>
      </div>
    </template>
    <style>
      .run-widget {
        margin: 10px 0 0 0;
      }
      paper-slider {
        margin: -8px 0 0 -15px;
        width: 100%;
      }
      .step-display-container {
        font-size: 0.9em;
        margin: 0 15px 0 0;
      }
      .run-text {
        display: inline-block;
      }
      .run-color-box {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        display: inline-block;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-pr-curve-dashboard">
  <template>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <div class="sidebar-section">
          <tf-option-selector id="time-type-selector" name="Time Display Type" selected-id="{{_timeDisplayType}}">
            <paper-button id="step">step</paper-button><paper-button id="relative">relative</paper-button><paper-button id="wall_time">wall</paper-button>
          </tf-option-selector>
        </div>
        <template is="dom-if" if="[[_runToAvailableTimeEntries]]">
          <div class="sidebar-section" id="steps-selector-container">
            <tf-pr-curve-steps-selector runs="[[_relevantSelectedRuns]]" run-to-step="{{_runToStep}}" run-to-available-time-entries="[[_runToAvailableTimeEntries]]" time-display-type="[[_timeDisplayType]]"></tf-pr-curve-steps-selector>
          </div>
        </template>
        <div class="sidebar-section">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>
      <div class="center" slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No precision–recall curve data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>
                You haven’t written any precision–recall data to your event
                files.
              </li>
              <li>
                TensorBoard can’t find your event files.
              </li>
            </ul>
            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]" get-category-item-key="[[_getCategoryItemKey]]">
              <template>
                <tf-pr-curve-card active="[[active]]" runs="[[item.runs]]" tag="[[item.tag]]" tag-metadata="[[_tagMetadata(_runToTagInfo, item.runs, item.tag)]]" request-manager="[[_requestManager]]" run-to-step-cap="[[_runToStep]]"></tf-pr-curve-card>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
      /** Do not let the steps selector occlude the run selector. */
      #steps-selector-container {
        max-height: 40%;
        overflow-y: auto;
      }
    </style>
  </template>

  
</dom-module>















<dom-module id="paper-spinner">
  <template strip-whitespace>
    <style include="paper-spinner-styles"></style>

    <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
      <div class="spinner-layer layer-1">
        <div class="circle-clipper left"></div>
        <div class="circle-clipper right"></div>
      </div>

      <div class="spinner-layer layer-2">
        <div class="circle-clipper left"></div>
        <div class="circle-clipper right"></div>
      </div>

      <div class="spinner-layer layer-3">
        <div class="circle-clipper left"></div>
        <div class="circle-clipper right"></div>
      </div>

      <div class="spinner-layer layer-4">
        <div class="circle-clipper left"></div>
        <div class="circle-clipper right"></div>
      </div>
    </div>
  </template>

  
</dom-module>








<dom-module id="input-pipeline-analyzer">
  <template>
    <style include="plottable-style"></style>
    <style>
      .section-header {
        text-decoration: underline;
        font-weight: bold;
        font-size: 200%;
      }
      .sub-section-header {
        text-decoration: underline;
        font-weight: bold;
        font-size: 150%;
      }
      #summary-host {
        font-weight: bold;
      }
      .highlighted-text {
        text-decoration: underline;
        font-weight: bold;
        font-size: 120%;
      }
      .stddev-text {
        font-style: italic;
        opacity: 0.7;
      }
      .left-pane {
        width: 30%;
      }
      .right-pane {
        width: 100%;
        height: 300px;
      }
      .table-style {
        table-layout: fixed;
        width: 95%;
      }
      .performance-table {
        width: 100%;
      }
      .x-axis-title {
        text-align: center;
        text-transform: capitalize;
      }
      .y-axis-title {
        writing-mode: bt-rl;
        transform: rotate(270deg);
        text-align: center;
        white-space: nowrap;
        text-transform: capitalize;
      }
      #recommendation_details {
        color: green;
      }
      #recommendation_details a {
        color: #ff33cc;
        text-decoration: underline;
      }
      #summary_conclusion {
        font-weight: bolder;
        font-style: italic;
        color: var(--summary-color, green);
      }
      #summary_nextstep {
        font-weight: bolder;
        font-style: italic;
        color: green;
      }
      #recommendation_title {
        font-weight: bolder;
        font-style: normal;
        color: black;
      }
    </style>
    <div>
      <div id="section_summary">
        <div id="title_summary">
          <p class="section-header">
            Section 1: Summary of input-pipeline analysis
          
        </div>
        <p><span id="summary_conclusion">[[_summary_conclusion]]</span>
        <p>
          <span id="recommendation_title">Recommendation for next step: </span><span id="summary_nextstep">[[_summary_nextstep]]</span>
        
      </div>
      <div id="section_device_side_analysis" hidden="[[!_show_device_side_analysis]]">
        <div id="title_device_side_analysis">
          <p class="section-header">Section 2: Device-side analysis details
        </div>
        <div id="section_device_step_time">
          <div id="title_device_step_time">
            <p class="sub-section-header">Section 2.1: Device step time
          </div>
          <table class="table-style">
            <tr>
              <td class="left-pane">
                <div>
                  <p class="highlighted-text">
                    Device step-time statistics (in ms)
                  
                </div>
                <p>
                  <span><b>Average:</b> </span>
                  <span>[[_steptime_ms_average]] ms </span>
                  <span class="stddev-text">(σ = [[_steptime_ms_stddev]] ms)</span>
                
                <p>
                  <span><b>Range:</b> </span>
                  <span>[[_steptime_ms_minimum]] - [[_steptime_ms_maximum]]
                    ms</span>
                
              </td>
              <td><div class="y-axis-title">milliseconds</div></td>
              <td class="right-pane">
                <vz-line-chart2 id="device_step_chart" style="height:300px;"></vz-line-chart2>
                <div><p class="x-axis-title">training step number</div>
              </td>
            </tr>
          </table>
        </div>
        <div id="section_device_infeeddeq_time">
          <div id="title_device_infeeddeq_time">
            <p class="sub-section-header">
              <span>Section 2.2: Range of device time waiting for input data
              </span>
              <span><i style="opacity:0.5">across cores</i> at each step </span>
            
          </div>
          <table class="table-style">
            <tr>
              <td class="left-pane">
                <p>
                  <span class="highlighted-text">% of device step time waiting for input data</span>
                  <span>
                    (average over the maximum waiting time across cores at each
                    step)</span>
                
                <p>
                  <span><b>Average:</b> </span>
                  <span>[[_infeed_percent_average]] % </span>
                  <span class="stddev-text">(σ = [[_infeed_percent_stddev]] %)</span>
                
                <p>
                  <span><b>Range:</b> </span>
                  <span>[[_infeed_percent_minimum]] - [[_infeed_percent_maximum]]
                    %</span>
                
              </td>
              <td>
                <div class="y-axis-title"><p>% of device step time</div>
              </td>
              <td class="right-pane">
                <vz-line-chart2 id="device_infeed_chart" style="height:300px;"></vz-line-chart2>
                <div><p class="x-axis-title">training step number</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="section_host_side_analysis">
        <div id="title_host_side_analysis">
          <p class="section-header">Section 3: Host-side analysis details
        </div>
        <div hidden$="[[!_show_host_side_chart]]">
          <div style="height:300px;" id="host_side_chart"></div>
          <p>
            <span><b>What can be done to reduce above components of the host input
                time:</b></span>
          
          <div id="recommendation_details"></div>
        </div>
        <div hidden$="[[_show_host_side_chart]]">
          Host side analysis can not be done without instrumentation.
        </div>
        <p>
          Click the "Show" button below to see the source data of the breakdown.
        
        <button on-click="onClick">[[_toggle_button_text]]</button>
        <table class="performance-table" hidden$="[[!_show_host_side_table]]">
          <thead>
            <tr><th>Input Op</th>
            <th>Count</th>
            <th>Total Time (in ms)</th>
            <th>Total Time (as % of total input-processing time)</th>
            <th>Total Self Time (in ms)</th>
            <th>Total Self Time (as % of total input-processing time)</th>
            <th>Category</th>
          </thead>
          <tbody id="host_side_table_content"></tbody>
        </table>
      </div>
    </div>
  </template>

  
</dom-module>








<dom-module id="iron-image">
  <template>
    <style>
      :host {
        display: inline-block;
        overflow: hidden;
        position: relative;
      }

      #baseURIAnchor {
        display: none;
      }

      #sizedImgDiv {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;

        display: none;
      }

      #img {
        display: block;
        width: var(--iron-image-width, auto);
        height: var(--iron-image-height, auto);
      }

      :host([sizing]) #sizedImgDiv {
        display: block;
      }

      :host([sizing]) #img {
        display: none;
      }

      #placeholder {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;

        background-color: inherit;
        opacity: 1;

        @apply --iron-image-placeholder;
      }

      #placeholder.faded-out {
        transition: opacity 0.5s linear;
        opacity: 0;
      }
    </style>

    <a id="baseURIAnchor" href="#"></a>
    <div id="sizedImgDiv" role="img" hidden$="[[_computeImgDivHidden(sizing)]]" aria-hidden$="[[_computeImgDivARIAHidden(alt)]]" aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div>
    <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing)]]" crossorigin$="[[crossorigin]]" on-load="_imgOnLoad" on-error="_imgOnError">
    <div id="placeholder" hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]" class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div>
  </template>

  
</dom-module>






<dom-module id="paper-card">
  <template>
    <style include="paper-material-styles">
      :host {
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        background-color: var(--paper-card-background-color, var(--primary-background-color));
        border-radius: 2px;

        @apply --paper-font-common-base;
        @apply --paper-card;
      }

      /* IE 10 support for HTML5 hidden attr */
      :host([hidden]), [hidden] {
        display: none !important;
      }

      .header {
        position: relative;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        overflow: hidden;

        @apply --paper-card-header;
      }

      .header iron-image {
        display: block;
        width: 100%;
        --iron-image-width: 100%;
        pointer-events: none;

        @apply --paper-card-header-image;
      }

      .header .title-text {
        padding: 16px;
        font-size: 24px;
        font-weight: 400;
        color: var(--paper-card-header-color, #000);

        @apply --paper-card-header-text;
      }

      .header .title-text.over-image {
        position: absolute;
        bottom: 0px;

        @apply --paper-card-header-image-text;
      }

      :host ::slotted(.card-content) {
        padding: 16px;
        position:relative;

        @apply --paper-card-content;
      }

      :host ::slotted(.card-actions) {
        border-top: 1px solid #e8e8e8;
        padding: 5px 16px;
        position:relative;

        @apply --paper-card-actions;
      }

      :host([elevation="1"]) {
        @apply --paper-material-elevation-1;
      }

      :host([elevation="2"]) {
        @apply --paper-material-elevation-2;
      }

      :host([elevation="3"]) {
        @apply --paper-material-elevation-3;
      }

      :host([elevation="4"]) {
        @apply --paper-material-elevation-4;
      }

      :host([elevation="5"]) {
        @apply --paper-material-elevation-5;
      }
    </style>

    <div class="header">
      <iron-image hidden$="[[!image]]" aria-hidden$="[[_isHidden(image)]]" src="[[image]]" alt="[[alt]]" placeholder="[[placeholderImage]]" preload="[[preloadImage]]" fade="[[fadeImage]]"></iron-image>
      <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
    </div>

    <slot></slot>
  </template>

  
</dom-module>


<dom-module id="overview-page">
  <template>
    <style>
      paper-card {
        margin: 5px;
        --paper-card-header-color: #f5f5f5;
        --paper-card-header: {
          background-color: #4285f4;
        }
      }
      .flex-horizontal {
        @apply --layout-horizontal;
      }
      .steptime-average {
        font-weight: bold;
        font-style: italic;
        color: var(--summary-color, green);
      }
      .table-style {
        table-layout: auto;
        width: 95%;
      }
      .top-ops-table {
        width: 100%;
      }
      vz-line-chart2.step-graph {
        width: 860px;
        height: 200px;
      }
      .x-axis-title {
        width: 80%;
        text-align: center;
        text-transform: capitalize;
      }
      .y-axis-title {
        width: 10px;
        writing-mode: bt-rl;
        transform: rotate(270deg);
        text-align: center;
        white-space: nowrap;
        text-transform: capitalize;
      }
      div.bottleneck-statement {
        color: var(--summary-color, green);
        font-weight: bolder;
        font-style: italic;
      }
      div.errorMessage {
        color: red;
        font-size: 0.5cm;
        font-weight: bolder;
        margin-top: 0.5cm;
        margin-bottom: 0.5cm;
      }
      div.bottleneckTips {
        color: #000000;
      }
      div.bottleneckTips a {
        color: #ff33cc;
        text-decoration: underline;
      }
      div.documentationTips {
        color: #666699;
      }
      div.documentationTips a {
        color: #33cc00;
        text-decoration: underline;
      }
    </style>
    <div class="errorMessage" hidden="[[!_error_message]]">
      <span>[[_error_message]]</span>
    </div>
    <div hidden="[[_error_message]]">
      <div class="container flex-horizontal">
        <paper-card heading="Performance Summary">
          <div class="card-content">
            <p>
              <b>Average step time</b> (lower is better):
              <b><span class="steptime-average">[[_steptime_ms_average]] ms</span>
              </b>
              <i style="opacity:0.7">(standard deviation =
                <span>[[_steptime_ms_stddev]]</span> ms)</i>
            
            <ul hidden$="[[!_infeed_ms_average]]">
              <li>Average infeed: <span>[[_infeed_ms_average]]</span> ms</li>
              <li>Average compute: <span>[[_compute_ms_average]]</span> ms</li>
            </ul>
            <p>
              <b>Host idle time</b> (lower is better):
              <span>[[_host_idle_time_percent]]</span>
            
            <p>
              <b>TPU idle time</b> (lower is better):
              <span>[[_device_idle_time_percent]]</span>
            
            <p>
              <b>Utilization of TPU Matrix Units</b> (higher is better):
              <span>[[_mxu_utilization_percent]]</span>
            
          </div>
        </paper-card>
        <paper-card heading="Step-time Graph">
          <div class="card-content" hidden="[[!_show_step_time_graph]]">
            <table class="table-style">
              <tr>
                <td><div class="y-axis-title">milliseconds</div></td>
                <td>
                  <vz-line-chart2 class="step-graph" id="device_step_chart">
                  </vz-line-chart2>
                  <div><p class="x-axis-title">training step number</div>
                </td>
              </tr>
            </table>
          </div>
        </paper-card>
      </div>
      <div class="container flex-horizontal">
        <paper-card heading$="[[_top_ops_heading]]">
          <div class="card-content">
            <button on-click="onClickTopOps">[[_top_ops_button_text]]</button>
            <thread>
                </thread><table class="top-ops-table" hidden$="[[!_show_top_ops_table]]">
              <tr><th>Time (%)</th>
                <th>Cumulative time (%)</th>
                <th>Category</th>
                <th>Operation</th>
                <th>GFlops/sec</th>
              
              <tbody id="top_ops_table_content"></tbody>
            </table>
          </div>
        </paper-card>
      </div>
      <div class="container flex-horizontal">
        <paper-card heading="Run Environment">
          <div class="card-content">
            <p><b>Number of Hosts used</b>: <span>[[_host_count]]</span>
            <p><b>TPU type</b>: Cloud TPU
            <p><b>Number of TPU cores</b>: <span> [[_tpu_core_count]]</span>
          </div>
        </paper-card>
        <paper-card heading="Recommendation for Next Steps">
          <div class="card-content">
            <div class="bottleneck-statement"><span>[[_statement]]</span></div>
            <div id="host_side_tips"></div>
            <div id="device_side_tips"></div>
            <div id="documentation_tips"></div>
          </div>
        </paper-card>
      </div>
    </div>
  </template>

  
</dom-module>







<dom-module id="tf-op-table-styles">
  <template>
    <style>
      #time,
      #wasted,
      #utilization {
        width: 60px;
      }
      #name {
        display: inline-block;
        min-width: 40%;
      }
      #row,
      #header {
        display: flex;
        align-items: center;
      }
      #row > *,
      #header > * {
        padding: 0.5em;
        overflow: hidden;
        flex-shrink: 0;
        box-sizing: border-box;
      }
      #header > * {
        padding-bottom: 0;
      }
      #provenance {
        flex: 1 1 0 !important;
      }
      #utilization {
        text-align: right;
      }
    </style>
  </template>
</dom-module>


<dom-module id="tf-op-table">
  <template>
    <style include="tf-op-table-styles">
      :host {
        display: block;
        background-color: white;
      }
      #header {
        font-size: smaller;
        font-weight: bold;
        color: #666;
        padding-bottom: 0.25em;
        border-bottom: 1px solid #666;
        text-transform: uppercase;
        white-space: nowrap;
      }
      /* Match indented names */
      #header > #name {
        padding-left: 2em;
      }
    </style>
    <div id="header">
      <span id="time">Time</span>
      <span id="wasted">Wasted</span>
      <span id="name">Name</span>
      <span id="provenance">TensorFlow Op</span>
      <span id="utilization">FLOPS</span>
    </div>
    <tf-op-table-entry node="[[rootNode]]" header-hover="[[_onHeaderHover]]" header-click="[[_onHeaderClick]]" children-count="{{childrenCount}}" show-p90="{{showP90}}" by-waste="{{byWaste}}" expanded="true">
    </tf-op-table-entry>
  </template>

  
</dom-module>


<dom-module id="tf-op-table-entry">
  <template>
    <style include="tf-op-table-styles">
      #row {
        position: relative;
        box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.06);
        z-index: 0;
      }
      #bar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        background-color: #cde;
      }
      :host {
        display: block;
      }
      :host(.selected) {
        background-color: rgba(0, 0, 0, 0.04);
      }
      :host(.selected) > #row {
        font-weight: bold;
      }
      #row:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
      #disclosure {
        display: inline-block;
        width: 1em;
      }
      #name {
        font-family: monospace;
      }
      #time,
      #wasted,
      #utilization {
        font-size: smaller;
      }
      /* Utilization has a background color, so it stretches to fill the row.
         Its text is in an inner div that remains vertically centered. */
      #utilization {
        align-self: stretch;
      }
      #utilization div {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }

      [hidden] {
        display: none !important;
      }
    </style>
    <div id="row" on-click="_handleHeaderClick" on-mouseenter="_handleHeaderMouseEnter" on-mouseleave="_handleHeaderMouseLeave" hidden="[[!level]]">
      <div id="bar" style$="width:{{_barWidth(node)}}"></div>
      <span id="time">{{_percent(node)}}</span>
      <span id="wasted">{{_timeWasted(node)}}</span>
      <span id="name" style$="padding-left:[[level]]em;">
        <span id="disclosure">
          <span hidden="[[!node.children.length]]">
            <span hidden="[[expanded]]">▶</span>
            <span hidden="[[!expanded]]">▼</span>
          </span> </span>{{node.name}}
      </span>
      <span id="provenance">{{_provenance(node)}}&nbsp;</span>
      <span id="utilization" hidden="[[!_hasFlops(node)]]" style$="background-color:{{_flameColor(node)}}">
        {{_utilization(node)}}</span>
    </div>
    <template is="dom-if" if="[[expanded]]">
      <template is="dom-repeat" items="{{_getKChildren(node, childrenCount, showP90, level)}}" sort="[[_sort(byWaste)]]">
        <tf-op-table-entry node="[[item]]" children-count="{{childrenCount}}" show-p90="{{showP90}}" by-waste="{{byWaste}}" level="{{_nextLevel(level)}}" header-hover="{{headerHover}}" header-click="{{headerClick}}">
        </tf-op-table-entry>
      </template>
      <template is="dom-if" if="[[_hasLeftout(node, childrenCount, level)]]">
        <span id="name" style$="padding-left:[[_getPaddingLeft(level)]]em;">
          [[_numLeftout(node, childrenCount)]] categories or ops have been left
          out.
        </span>
      </template>
    </template>
  </template>

  
</dom-module>





<dom-module id="tf-op-bar">
  <template>
    <style>
      :host {
        display: inline-block;
        height: 1.5em;
        line-height: 1.5em;
      }
    </style>
    &nbsp;[[_percent(value)]]
  </template>
  
</dom-module>


<dom-module id="tf-op-details">
  <template>
    <style>
      paper-card {
        --paper-card-header-color: white;
        width: 100%;
      }
      tf-op-bar {
        width: 100%;
      }
      #subheader {
        padding: 0 16px 6px;
        color: rgba(255, 255, 255, 0.7);
        position: relative;
        top: -10px;
      }
      .card-content {
        background: #fff;
      }
      .card-content > div {
        margin-bottom: 1em;
      }
      .expression {
        display: block;
        word-wrap: break-word;
      }
      .unavailable {
        font-style: italic;
        color: #666;
      }

      .layout {
        display: table;
        width: 50%;
        border-spacing: 1em 0.3em;
      }
      .layout > * {
        display: table-row;
      }
      .layout > * > * {
        display: table-cell;
      }
      .layout .size,
      .layout .size-x {
        text-align: center;
      }
      .layout .size-x {
        font-weight: bold;
        color: #888;
      }
      .layout .semantics {
        font-size: smaller;
        font-weight: bold;
        color: #48c;
        text-transform: uppercase;
        vertical-align: middle;
      }
      .layout .alignment {
        /* Make the background extend outside the box */
        position: absolute;
        padding: 0.5em;
        margin-top: -0.5em;
        width: 50%;
        box-sizing: border-box;
      }
    </style>
    <paper-card id="card" heading="[[node.name]]" elevation="2">
      <div id="subheader">[[_subheader(node)]]</div>
      <div class="card-content">
        <div hidden="[[!_hasFlops(node)]]">
          <b>FLOPS utilization: </b>
          <tf-op-bar color="[[_flopsColor(node)]]" value="[[_utilization(node)]]"></tf-op-bar>
        </div>
        <div hidden="[[!_hasMemoryUtilization(node)]]">
          <b>Memory bandwidth utilization: </b>
          <tf-op-bar color="[[_bwColor(node)]]" value="[[_memoryUtilization(node)]]"></tf-op-bar>
        </div>
        <div class="unavailable" hidden="[[!_fused(node)]]">
          Performance information for individual fused operations is not
          available.
        </div>
        <div class="unavailable" hidden="[[!node.category]]">
          Select items within this category for performance details.
        </div>
        <div hidden="[[!node.xla.expression]]">
          <b>XLA Expression: </b>
          <code class="expression">[[node.xla.expression]]</code>
        </div>
        <div hidden="[[!node.xla.provenance]]">
          <b>TensorFlow Name: </b>
          <code class="expression">[[node.xla.provenance]]</code>
        </div>
        <div hidden="[[!node.xla.layout]]">
          <b>Layout: </b>
          <div class="layout" hidden="[[!node.xla.layout]]">
            <template is="dom-repeat" items="[[node.xla.layout.dimensions]]">
              <div hidden="[[!index]]"><span class="size-x">×</span></div>
              <div>
                <span class="size">[[item.size]]</span>
                <span class="semantics">[[item.semantics]]</span>
                <span class="alignment" style$="background-color:[[_dimensionColor(item)]]">[[_dimensionHint(item)]]</span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </paper-card>
  </template>

  
</dom-module>




<dom-module id="tf-op-profile">
  <template>
    <style>
      :host {
        display: block;
        margin-right: 1.5em;
      }
      #control {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        overflow: auto;
        text-transform: uppercase;
        padding: 0.5em;
        vertical-align: bottom;
        text-align: bottom;
      }
      .controlRowLeft {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        line-height: 50px;
        text-align: bottom;
        justify-content: flex-start;
      }
      .controlRowRight {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        line-height: 50px;
        text-align: bottom;
        justify-content: flex-end;
      }
      paper-slider {
        --paper-slider-input: {
          width: 100px;
        }
        --paper-slider-height: 3px;
      }
      #description {
        margin-bottom: 2em;
        width: 600px;
      }
      [hidden] {
        display: none;
      }
    </style>
    <div class="tf-op-profile">
      <h3>
        Overall TPU FLOPS utilization is
        <span style$="color:[[_flopsColor(_root)]]">
          [[_utilizationPercent(_root)]]</span>
        , memory bandwidth utilization is
        <span style$="color:[[_bwColor(_root)]]">
          [[_memoryUtilizationPercent(_root)]]</span>
      </h3>
      <div id="description">
        <p>
          Modifying your model's architecture, data dimensions, and improving
          the efficiency of CPU operations may help reach the TPU's FLOPS
          potential.
        
        <p>
          "Idle" represents the portion of the total execution time on device
          that is idle. Wasted time is defined by
          <code>RuntimeFraction * (1 - max(FlopsUtilization,
            MemoryUtilization))</code>.
        
      </div>
      <div id="control">
        <span class="controlRowLeft" hidden$="[[!_hasTwoProfiles]]">By Program
          <paper-toggle-button checked="{{isByCategory}}"> </paper-toggle-button>By Category</span>
        
        <span class="controlRowLeft">Show top
          <paper-slider min="10" max="100" snaps step="10" value="{{childrenCount}}" editable>
          </paper-slider>ops</span>
        <span class="controlRowRight">&nbsp;
          <paper-toggle-button checked="{{byWaste}}"> </paper-toggle-button>Sort
          by wasted time</span>
        <span class="controlRowRight">off&nbsp;
          <paper-toggle-button checked="{{showP90}}"> </paper-toggle-button>Top
          90%</span>
      </div>
      <tf-op-table root-node="[[_root]]" active="{{active}}" by-waste="{{byWaste}}" show-p90="{{showP90}}" children-count="{{childrenCount}}">
      </tf-op-table>
    </div>
  </template>

  
</dom-module>


















<dom-module id="mv-line-chart">
  <template>
    <style include="plottable-style"></style>
    <div class="mv-line-chart">
      <h2>Working Space Size (MiB) vs Program Order (HLO Sequence)</h2>
      <div id="chartdiv" style="width:1200px;height:384px"></div>
      <div id="maxheap-details">
        <em>Hover over a bar for buffer details to appear on the left.</em>
      </div>
      <h3>By Program Order</h3>
      <div id="maxheapchart" style="width:1200px;height:200px"></div>
      <h3>By Size</h3>
      <div id="maxheapsizechart" style="width:1200px;height:200px"></div>
    </div>
  </template>
  
</dom-module>






<dom-module id="tf-mv-bar">
  <template>
    <style>
      :host {
        display: inline-block;
        height: 1.5em;
        line-height: 1.5em;
      }
    </style>
  </template>
</dom-module>


<dom-module id="buffer-details">
  <template>
    <style>
      paper-card {
        --paper-card-header-color: white;
        width: 100%;
      }
      tf-mv-bar {
        width: 100%;
      }
      #subheader {
        padding: 0 16px 6px;
        color: rgba(255, 255, 255, 0.7);
        position: relative;
        top: -10px;
      }
      .card-content {
        background: #fff;
      }
      .card-content > div {
        margin-bottom: 1em;
      }
      .expression {
        display: block;
        word-wrap: break-word;
      }
    </style>
    <paper-card id="card" heading="[[node.instructionName]]" hidden="[[!node]]" elevation="2">
      <div id="subheader">[[_subheader(node)]]</div>
      <div class="card-content">
        <div hidden="[[!size]]">
          <h4>Size: <span>[[size]]</span><b> MiB</b></h4>
        </div>
        <div hidden="[[!unpaddedSize]]">
          <b>Unpadded Size: </b><span>[[unpaddedSize]]</span><b> MiB</b>
        </div>
        <div hidden="[[!padding]]">
          <b>Extra memory due to padding: </b><span>[[padding]]</span><b> MiB</b>
        </div>
        <div hidden="[[!expansion]]">
          <b>Expansion: </b><span>[[expansion]]</span><b>X</b>
          <tf-mv-bar value="[[utilization]]"></tf-mv-bar>
        </div>
        <div hidden="[[!node.shape]]">
          <b>Shape (and minor-to-major order): </b>
          <code class="expression">[[node.shape]]</code>
        </div>
        <div hidden="[[!node.tfOpName]]">
          <b>Tf Op Name: </b>
          <code class="expression">[[node.tfOpName]]</code>
        </div>
        <div hidden="[[!node.groupName]]">
          <b>Allocation Type: </b><span>[[node.groupName]]</span>
        </div>
      </div>
    </paper-card>
  </template>
  
</dom-module>


<dom-module id="memory-viewer-dashboard">
  <template>
    <style>
      :host {
        overflow-x: auto;
        width: 100%;
      }
      #description {
        margin-bottom: 2em;
        width: 600px;
      }
      mv-line-chart {
        width: 100%;
        height: 100%;
      }
    </style>
    <div class="memory-viewer-dashboard" style="overflow:auto">
      <h3>Module name: <span>[[moduleName_]]</span></h3>
      <h3>
        Peak memory allocation is <span>{{peakHeapSizeMiB_}}</span> MiB
        <span style="font-size:20px" hidden="{{!unpaddedPeakHeapSizeMiB_}}">( {{unpaddedPeakHeapSizeMiB_}} MiB without padding)</span>
      </h3>
      <div id="description">
        <p>
          Modifying your model's architecture, batch size and data dimentions
          may help reduce the memory footprint.
        
      </div>
      <mv-line-chart data="{{usage}}" active="{{active}}"></mv-line-chart>
    </div>
  </template>
  
</dom-module>






<dom-module id="details-card">
  <template>
    <style>
      paper-card {
        max-height: 50vh;
        overflow-y: auto;
        --paper-card-header-color: white;
        --paper-card-header: {
          background-color: rgb(178, 34, 34);
        }
        width: 100%;
      }

      .card-content > div {
        margin-bottom: 1em;
        top: -5px;
      }

      .value {
        font-weight: normal;
        text-align: right;
      }

      .info {
        font-size: 20px;
        font-weight: bold;
      }

      .code-style {
        font-size: 14px;
        font-weight: normal;
      }
    </style>
    <paper-card id="card" heading="[[_name]]" hidden="[[!_name]]" elevation="2">
      <template is="dom-repeat" items="[[nodes]]" as="node">
        <div class="card-content info">
          <div hidden="[[_isStep(node)]]">
            <p>
              Data Transferred:
              <span class="value">[[_sizeMiB(node.dataSize)]] MiB</span>
            
            <p>
              Latency:
              <span class="value">[[_format(node.durationUs)]] µs</span>
            
            <p>
              BW:
              <span class="value">
                [[_bandwidth(node.dataSize, node.durationUs)]] GiB/s</span>
            
          </div>
          <div hidden="[[!_isChannel(node)]]">
            <p>
              Send Delay:
              <span class="value">[[_format(node.sendDelayUs)]] µs</span>
            
            <p>Hlo Names:
            <code class="code-style">
              <template is="dom-repeat" items="[[node.hloNames]]">
                "[[item]]"
              </template>
            </code>
          </div>
          <div hidden="[[!_hasReplicaGroups(node)]]">
            <p>Replica Groups
            <code class="code-style">
              <template is="dom-repeat" items="[[node.replicaGroups]]">
                {[[item.replicaIds]]}<br>
              </template>
            </code>
          </div>
          <div hidden="[[!_isStep(node)]]">
            <template is="dom-repeat" items="[[stepBreakdownLayers]]">
              <p>
                [[item.label]]:
                <span class="value">
                  [[_getStepBreakdownValue(node, item.key)]] µs
                  [[_getStepBreakdownPct(node, item.key)]]</span>
              
            </template>
          </div>
        </div>
      </template>
    </paper-card>
  </template>
  
</dom-module>








<dom-module id="stack-bar-chart">
  <template>
    <style>
      :host {
        display: block;
        margin-right: 1.5em;
      }

      .axis text {
        font: 14px sans-serif;
      }

      .svg-container {
        display: inline-block;
        padding-bottom: 90%; /* aspect ratio */
        position: relative;
        vertical-align: top;
        width: 90%;
      }

      .svg-content-responsive {
        display: inline-block;
        left: 0;
        position: absolute;
        top: 10px;
      }
    </style>
    <div class="stack-bar-chart">
      <div id="chart"></div>
    </div>
  </template>
  
</dom-module>









<dom-module id="topology-graph">
  <template>
    <style is="custom-style">
      .flex-horizontal {
        @apply --layout-horizontal;
      }

      .flexchild {
        @apply --layout-flex;
      }

      :host {
        display: block;
        margin-right: 1.5em;
      }

      .cells {
        fill: #aaa;
      }

      .label {
        font: 24px sans-serif;
        text-anchor: start;
      }

      /* disable text selection */
      svg *::selection,
      svg *::-moz-selection,
      svg *::-webkit-selection {
        background: transparent;
      }

      rect.selection {
        fill: transparent;
        stroke: #333;
        stroke-dasharray: 4px;
        stroke-opacity: 0.5;
      }

      rect.bordered {
        stroke: #e6e6e6;
        stroke-width: 2px;
      }

      rect.cell-border {
        stroke: #eee;
        stroke-width: 0.3px;
      }

      rect.cell-selected {
        stroke: rgb(51, 102, 153);
        stroke-width: 0.5px;
      }

      rect.cell-hover {
        stroke: #f00;
        stroke-width: 0.3px;
      }

      #tooltip {
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        height: auto;
        padding: 10px;
        pointer-events: none;
        position: absolute;
        width: 200px;
      }

      #tooltip.hidden {
        display: none;
      }

      #tooltip p {
        font: 12px sans-serif;
        margin: 0;
        line-height: 20px;
      }

      #overview {
        margin-left: 20px;
      }

      paper-item:hover.menu-option {
        background: #e0e0e0;
      }

      paper-slider {
        --paper-slider-input: {
          width: 150px;
        }
      }

      .metrics-button {
        height: 60px;
        width: 60px;
      }

      .topo-header {
        margin-left: 16px;
      }

      .control-row-left {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        line-height: 50px;
        margin-left: 16px;
        text-align: bottom;
      }

      .metrics-label {
        padding: 0.5em;
        text-transform: uppercase;
      }

      .topo-title {
        font-size: 24px;
        font-weight: bold;
        line-height: 32px;
        text-align: bottom;
        vertical-align: bottom;
      }

      #container {
        /* Tooltip should position relative to the container. */
        position: relative;
      }
    </style>
    <div class="topology-graph">
      <div class="topo-header container flex-horizontal">
        <div class="control-row-left topo-title">
          {{_tpuType}} {{_totalCoreCount}}
        </div>
        <span class="control-row-left metrics-label">
          [[_getSelectedMetricLabel(metrics, selectedMetricIdx)]]</span>
        <paper-menu-button close-on-activate="true">
          <paper-icon-button raised icon="arrow-drop-down" slot="dropdown-trigger" class="dropdown-trigger metrics-button">
          </paper-icon-button>
          <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{selectedMetricIdx}}">
            <template is="dom-repeat" items="[[metrics]]">
              <paper-item value="[[item.key]]">[[item.label]]</paper-item>
            </template>
          </paper-listbox>
        </paper-menu-button>
      </div>
      <div id="container">
        <div id="tpgraph"></div>
        <div id="tooltip" class="hidden">
          <p><span id="value"></span>
        </div>
      </div>
    </div>
  </template>
  
</dom-module>


<dom-module id="pod-viewer-dashboard">
  <template>
    <style>
      :host {
        display: block;
        margin-right: 1.5em;
      }

      #control {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        overflow: auto;
        padding: 0.5em;
        text-align: bottom;
        text-transform: uppercase;
        vertical-align: bottom;
      }

      .control-row-left {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        line-height: 50px;
        margin-left: 16px;
        text-align: bottom;
      }

      paper-slider {
        --paper-slider-input: {
          width: 100px;
        }
        --paper-slider-height: 3px;
      }

      .step-num-text {
        font-size: 20px;
        font-weight: bold;
        padding-left: 1em;
      }

      .stack-title {
        font-size: 24px;
        line-height: 32px;
      }

      .bar-chart {
        overflow: auto;
      }

      #title {
        margin-left: 16px;
      }

      .error-message {
        color: red;
        font-size: 32px;
        font-weight: bold;
        margin-left: 16px;
        margin-top: 32px;
      }
    </style>
    <div class="error-message" hidden="[[!_errorMessage]]">
      <span>[[_errorMessage]]</span>
    </div>
    <div id="control" hidden="[[_errorMessage]]">
      
      <span class="control-row-left">Please select a step
        <paper-slider min="0" max="[[_maxStepId]]" snaps step="1" value="{{curStepId}}">
        </paper-slider>
        <span class="step-num-text">Step [[_getStepNum(_podStatsMap)]]</span>
      </span>
    </div>
    <div class="pod-viewer-dashboard" hidden="[[_errorMessage]]">
      <div id="topo-graph">
        <topology-graph run-environment="[[_runEnvironment]]" data="[[_podStatsMap]]" metrics="[[_stepBreakdownLayers]]" active-bar="[[activeBar]]">
        </topology-graph>
      </div>
      <div id="channel-bars" class="bar-chart" hidden="[[!_channelDb]]">
        <div id="title">
          <div class="stack-title">Latency of Send and Recv channels</div>
          <p>(x-axis: channel id, y-axis: time (µs))
        </div>
        <stack-bar-chart data="[[_channelDb]]" stack-layers="[[_channelLayers]]" x-domain-func="[[_channelFunc]]" active-bar="{{activeBar}}"></stack-bar-chart>
      </div>
      <div id="all-reduce-bars" class="bar-chart" hidden="[[!_allReduceDb]]">
        <div id="title">
          <div class="stack-title">
            Duration of all-reduce op or custom fusion for all-reduce
          </div>
          <p>
            (x-axis: short names for all-reduces ops (a#) or fusion (f#),
            y-axis: time (µs))
          
        </div>
        <stack-bar-chart data="[[_allReduceDb]]" stack-layers="[[_allReduceLayers]]" x-domain-func="[[_allReduceFunc]]" active-bar="{{activeBar}}"></stack-bar-chart>
      </div>
      <div id="stack-bars" class="bar-chart" hidden="[[!_stepStats]]">
        <div id="title">
          <div class="stack-title">Step breakdown</div>
          <p>(x-axis: global chip id, core id, y-axis: time (µs))
        </div>
        <stack-bar-chart data="[[_stepStats]]" stack-layers="[[_stepBreakdownLayers]]" x-domain-func="[[_stepBreakdownFunc]]" active-bar="{{activeBar}}"></stack-bar-chart>
      </div>
    </div>
  </template>
  
</dom-module>











<dom-module id="google-chart-styles">
  <template>
    <style>
      :host {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        margin: 0;
        padding: 0;
        width: 400px;
        height: 300px;
      }

      :host([type='gauge']) {
        width: 300px;
        height: 300px;
      }

      #chartdiv {
        width: 100%;
      }
    </style>
  </template>
</dom-module>



<dom-module id="google-chart">
  <template>
    <style include="google-chart-styles"></style>
    <google-chart-loader id="loader" type="[[type]]"></google-chart-loader>
    <div id="chartdiv"></div>
  </template>
</dom-module>




<dom-module id="google-chart-demo">
  <template>
    <style>
      code {
        color: #007000;
      }
      google-chart {
        height: 300px;
        width: 400px;
      }
    </style>
    <div id="demo-body">
      <p>
        Website traffic data by country from an external JSON resource where the
        data is in raw DataTable format.
      
      <google-chart type="column" options="{&quot;title&quot;: &quot;Visitors by Country&quot;, &quot;legend&quot;: &quot;none&quot;}" data="[[_data]]">
      </google-chart>
    </div>
  </template>

  
</dom-module>





<dom-module id="tf-plugin-dialog">
  <template>
    
    <template is="dom-if" if="[[_open]]">
      <div id="dashboard-backdrop"></div>
    </template>
    <paper-dialog id="dialog" modal opened="{{_open}}" with-backdrop="[[_useNativeBackdrop]]">
      <h2 id="dialog-title">[[_title]]</h2>
      <div class="custom-message">[[_customMessage]]</div>
    </paper-dialog>
    <style>
      /** We rely on a separate `_hidden` property instead of directly making use
          of the `_open` attribute because this CSS specification may strangely
          affect other elements throughout TensorBoard. See #899. */
      #dashboard-backdrop {
        background: rgba(0, 0, 0, 0.6);
        width: 100%;
        height: 100%;
      }

      #dialog-title {
        padding-bottom: 15px;
      }

      .custom-message {
        margin-top: 0;
        margin-bottom: 15px;
      }
    </style>
  </template>
  
</dom-module>





<dom-module id="tf-profile-dashboard">
  <template>
    <paper-toast id="toast" duration="0" text="" always-on-top>
      <paper-button onclick="toast.toggle()" class="yellow-button">Close now!</paper-button>
    </paper-toast>
    <tf-plugin-dialog id="initialDialog"></tf-plugin-dialog>
    <paper-dialog id="captureProfileDialog" modal>
      <paper-input label="Profiler Service URL or TPU name" always-float-label placeholder="localhost:6009" value="{{_profilerServiceAddress}}" auto-validate required></paper-input>
      <label id="profiler-address-type-label">Address Type:</label>
      <paper-radio-group selected="{{_profilerServiceAddressType}}" aria-labelledby="profiler-address-type-label">
        <paper-radio-button name="ip-address">IP Address</paper-radio-button>
        <paper-radio-button name="tpu-name">TPU Name</paper-radio-button>
      </paper-radio-group>
      <paper-input label="Profiling Duration (milliseconds)" always-float-label type="number" min="1" max="600000" auto-validate pattern="[0-9]+" error-message="Input is not an integer between 1 to 600000" required value="{{_profileDuration}}"></paper-input>

      <paper-input label="Automatically retry N times when no trace event is collected" always-float-label type="number" min="0" max="100" auto-validate pattern="[0-9]+" error-message="Input is not an integer between 0 to 100" required value="{{_profileNumRetry}}"></paper-input>

      <div hidden="{{!_shouldShowTpuOptions(_profilerServiceAddressType)}}">
        <paper-checkbox checked="{{_profileIncludeDatasetOps}}">Trace dataset ops</paper-checkbox>
        <paper-input label="Subset of worker TPUs to profile (optional)" always-float-label placeholder="List of IPs, e.g. 10.4.1.2,10.4.1.3" value="{{_profileWorkerList}}"></paper-input>
      </div>
      <div class="buttons">
        <paper-button dialog-confirm raised on-tap="_captureProfile" disabled$="[[_shouldDisableCaptureProfileButton(_profilerServiceAddress, _profileDuration, _profileNumRetry)]]">
          Capture</paper-button>
        <paper-button dialog-confirm>Close</paper-button>
      </div>
    </paper-dialog>
    <template is="dom-if" if="[[_isState(_topLevelState, 'LOADING')]]">
      <div id="progress-bar">
        <div id="progress-msg">[[progress.msg]]</div>
        <paper-progress value="[[progress.value]]"></paper-progress>
      </div>
    </template>
    <template is="dom-if" if="[[_isState(_topLevelState, 'DATA_NOT_FOUND')]]">
      <div style="max-width: 540px; margin: 80px auto 0 auto;">
        <h3>No profile data was found.</h3>

        <paper-button raised on-tap="_openCaptureProfileDialog">Capture Profile</paper-button>
        <paper-spinner class="capture-spinner" active="[[_capturingProfile]]"></paper-spinner>

        <p>
          If you have a model running on CPU, GPU, or Google Cloud TPU, you may
          be able to use the above button to capture a profile.
        

        <p>
          If you’re a CPU or GPU user, please use the IP address option. You may
          want to check out the
          <a href="https://colab.research.google.com/github/tensorflow/tensorboard/blob/master/docs/r2/tensorboard_profiling_keras.ipynb" rel="noopener" target="_blank">tutorial</a>
          on how to start a TensorFlow profiler server and profile a Keras model
          on a GPU.
        

        <p>
          If you're a TPU user, please use the TPU name option and you may want
          to check out the
          <a href="https://cloud.google.com/tpu/docs/cloud-tpu-tools" rel="noopener" target="_blank">tutorial</a>
          on how to interpreting the profiling results.
        

        <p>
          If you think profiling is done properly, please see the page of
          <a href="https://cloud.google.com/tpu/docs/troubleshooting" rel="noopener" target="_blank">Google Cloud TPU Troubleshooting and FAQ</a>
          and consider filing an issue on GitHub.
        
      </div>
    </template>
    <template is="dom-if" if="[[_isState(_topLevelState, 'ACTIVE')]]">
      <tf-dashboard-layout>
        <div class="sidebar" slot="sidebar">
          <div class="allcontrols">
            <div class="sidebar-section">
              <paper-button raised on-tap="_openCaptureProfileDialog">Capture Profile</paper-button>
              <paper-spinner class="capture-spinner" active="[[_capturingProfile]]"></paper-spinner>
            </div>
            <div class="sidebar-section">
              <div class="title">
                Runs <span class="counter">([[_datasets.length]])</span>
              </div>
              <paper-dropdown-menu no-label-float no-animations noink horizontal-align="left">
                <paper-listbox id="list_box_run" slot="dropdown-content" selected="{{selectedDatasetIndex}}">
                  <template id="run_items" is="dom-repeat" items="[[_datasets]]">
                    <paper-item>[[item.name]]</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>
            <div class="sidebar-section">
              <div class="title">
                Tools <span class="counter">([[_activeToolsList.length]])</span>
              </div>
              <paper-dropdown-menu no-label-float no-animations noink horizontal-align="left">
                <paper-listbox id="list_box_tool" slot="dropdown-content" selected="{{selectedToolIndex}}">
                  <template id="tool_items" is="dom-repeat" items="[[_activeToolsList]]">
                    <paper-item>[[item]]</paper-item>
                  </template>
                  <template is="dom-if" if="[[!_hasActiveTools()]]" restamp="true">
                    <paper-item>None</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>
            <div class="sidebar-section">
              <div class="title">
                Hosts <span class="counter">([[_activeHostsList.length]])</span>
              </div>
              <paper-dropdown-menu no-label-float no-animations noink horizontal-align="left">
                <paper-listbox id="list_box_host" slot="dropdown-content" selected="{{selectedHostIndex}}">
                  <template id="host_items" is="dom-repeat" items="[[_activeHostsList]]">
                    <paper-item>[[_getHostDisplayName(item)]]</paper-item>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>
            <div class="sidebar-section details-container">
              <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'op_profile')]]" restamp="true">
                <tf-op-details hidden="[[!_activeOpDetails]]" node="[[_activeOpDetails]]"></tf-op-details>
              </template>
              <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'memory_viewer')]]" restamp="true">
                <buffer-details hidden="[[!_activeBufferDetails]]" node="[[_activeBufferDetails]]"></buffer-details>
              </template>
              <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'pod_viewer')]]" restamp="true">
                <details-card hidden="[[!_activePodDetails]]" nodes="[[_activePodDetails]]"></details-card>
              </template>
            </div>
          </div>
        </div>
        <div class="center" slot="center">
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'trace_viewer')]]" restamp="true">
            <iframe id="tv_iframe" height="100%" width="100%" src$="[[_traceDataUrl]]">
            </iframe>
          </template>
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'op_profile')]]" restamp="true">
            <tf-op-profile _data="[[_opProfileData]]" active="{{_activeOpDetails}}"></tf-op-profile>
          </template>
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'input_pipeline_analyzer')]]" restamp="true">
            <input-pipeline-analyzer _data="[[_inputPipelineData]]"></input-pipeline-analyzer>
          </template>
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'overview_page')]]" restamp="true">
            <overview-page _data="[[_overviewPageData]]"></overview-page>
          </template>
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'pod_viewer')]]" restamp="true">
            <pod-viewer-dashboard data="[[_podViewerData]]" active-details="{{_activePodDetails}}"></pod-viewer-dashboard>
          </template>
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'memory_viewer')]]" restamp="true">
            <memory-viewer-dashboard _data="[[_memoryViewerData]]" active="{{_activeBufferDetails}}"></memory-viewer-dashboard>
          </template>
          <template is="dom-if" if="[[_isCurrentTool(_toolInScope, 'google_chart_demo')]]" restamp="true">
            <google-chart-demo _data="[[_googleChartDemoData]]"></google-chart-demo>
          </template>
        </div>
      </tf-dashboard-layout>
    </template>
    <style include="dashboard-style"></style>

    <style>
      .center {
        position: relative;
        height: 100%;
      }
      iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #progress-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: absolute;
        top: 40px;
        left: 0;
        font-size: 13px;
      }
      #progress-msg {
        width: 400px;
        margin-bottom: 5px;
      }
      paper-progress {
        width: 400px;
        --paper-progress-height: 6px;
        --paper-progress-active-color: #f3913e;
      }
      paper-dropdown-menu {
        width: 100%;
      }
      .details-container {
        padding-right: 5px;
      }
      tf-op-details,
      buffer-details,
      details-card {
        width: 100%;
        will-change: transform;
      }
      .yellow-button {
        color: #eeff41;
        text-transform: none;
      }
      .capture-spinner {
        padding-left: 5px;
        vertical-align: middle;
      }
    </style>
  </template>
  
</dom-module>















<dom-module id="tf-beholder-video">
  <template>
    <div id="container">
      <img id="video" src$="[[_imageURL]]">
    </div>

    <style>
      img {
        image-rendering: pixelated;
        margin-right: 10px;
      }
    </style>
  </template>

  
</dom-module>




<dom-module id="tf-beholder-info">
  <template>
    <template is="dom-repeat" items="[[_items]]">
      <div class="section-info" style$="height: [[item.height]]px">
        <ul>
          <li>[[item.name]]</li>
          <li>shape: [[item.shape]]</li>
          <li>range: [ [[item.min]], [[item.max]] ]</li>
          <li>mean: [[item.mean]]</li>
        </ul>
      </div>
    </template>

    <style>
      .section-info {
        margin: 0 0 5px 0;
      }
      .section-info ul {
        list-style-type: none;
        margin: 0;
        padding-left: 10px;
      }
    </style>
  </template>

  
</dom-module>


<dom-module id="tf-beholder-dashboard">
  <template>
    <tf-plugin-dialog id="initialDialog"></tf-plugin-dialog>
    <tf-dashboard-layout>
      <div class="sidebar" slot="sidebar">
        <template is="dom-if" if="[[_controls_disabled]]">
          <div class="sidebar-section">
            <p class="controls-disabled-message">
              Controls disabled: directory is not writeable.
            
            <p class="disclaimer">
              Beholder requires write access to the log directory in order to
              communicate visualization changes to the <code>Beholder</code>
              instance in your model.
            
          </div>
        </template>
        <div class="sidebar-section">
          <h3>Values</h3>
          <paper-radio-group id="valuesSelector" selected="{{_values}}">
            <paper-radio-button name="trainable_variables" disabled="[[_controls_disabled]]">
              <pre>tf.trainable_variables()</pre>
            </paper-radio-button>
            <paper-radio-button id="option-arrays" name="arrays" disabled="[[_controls_disabled]]">
              <pre>b.update(arrays=[NP_ARRAYS])</pre>
            </paper-radio-button>
            <paper-radio-button id="option-frames" name="frames" disabled="[[_controls_disabled]]">
              <pre>b.update(frame=NP_ARRAY)</pre>
            </paper-radio-button>
          </paper-radio-group>

          <template is="dom-if" if="[[_valuesNotFrame(_values)]]">
            <paper-checkbox checked="{{_showAll}}" disabled="[[_controls_disabled]]">Show all data <i>(can be resource intensive)</i></paper-checkbox>
          </template>
        </div>

        <template is="dom-if" if="[[_valuesNotFrame(_values)]]">
          <div class="sidebar-section">
            <h3>Mode</h3>
            <paper-radio-group id="modeSelector" selected="{{_mode}}">
              <paper-radio-button name="current" disabled="[[_controls_disabled]]">
                current values
              </paper-radio-button>
              <paper-radio-button name="variance" disabled="[[_controls_disabled]]">
                variance over train steps
              </paper-radio-button>
            </paper-radio-group>
            <template is="dom-if" if="[[_varianceSelected(_mode)]]">
              <h4>Variance timesteps: {{_windowSize}}</h4>
              <paper-slider id="windowSlider" value="{{_windowSize}}" type="number" step="1" min="2" max="20" pin="true" disabled="[[_controls_disabled]]">
              </paper-slider>
            </template>
          </div>

          <div class="sidebar-section">
            <h3>Image scaling</h3>
            <paper-radio-group id="scalingSelector" selected="{{_scaling}}">
              <paper-radio-button id="option-layer" name="layer" disabled="[[_controls_disabled]]">
                per section
              </paper-radio-button>
              <paper-tooltip for="option-layer" position="right">
                Black is the lowest value in that section, white is that largest
                value in that section.
              </paper-tooltip>

              <paper-radio-button id="option-network" name="network" disabled="[[_controls_disabled]]">
                all sections
              </paper-radio-button>
              <paper-tooltip for="option-network" position="right">
                Black is the smallest value in all sections, white is the
                largest value in all sections.
              </paper-tooltip>
            </paper-radio-group>

            <div id="colormap-selection">
              <div id="colormap-selection-label">Colormap:</div>
              <paper-dropdown-menu no-label-float selected-item-label="{{_colormap}}" disabled="[[_controls_disabled]]">
                <paper-listbox slot="dropdown-content" selected="0">
                  <paper-item>magma</paper-item>
                  <paper-item>inferno</paper-item>
                  <paper-item>plasma</paper-item>
                  <paper-item>viridis</paper-item>
                  <paper-item>grayscale</paper-item>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>
          </div>
        </template>

        <div class="sidebar-section">
          <h3>Updates per second: {{_FPS}}</h3>
          <paper-slider id="FPSSlider" value="{{_FPS}}" type="number" step="1" min="0" max="30" pin="true" disabled="[[_controls_disabled]]">
          </paper-slider>
        </div>

        <div class="sidebar-section">
          <div>
            <paper-button class="x-button" id="record_button" on-tap="_toggleRecord" disabled="[[_controls_disabled]]">
              [[_recordText]]
            </paper-button>
          </div>
        </div>

        <div class="sidebar-section">
          <p class="disclaimer">
            Note: Beholder currently only works well on local file systems.
          
        </div>
      </div>
      <div class="center" slot="center">
        <template is="dom-if" if="[[!_is_active]]">
          <div class="no-data-warning">
            <h3>No Beholder data was found.</h3>

            <p>Probable causes:
            <ul>
              <li>Your script isn't running.</li>
              <li>You aren't calling <code>beholder.update()</code>.</li>
            </ul>

            <p>
              To use Beholder, import and instantiate the
              <code>Beholder</code> class, and call its
              <code>update</code> method with a <code>Session</code> argument
              after every train step:
            

            <pre>from tensorboard.plugins.beholder import Beholder
beholder = Beholder(LOG_DIRECTORY)

# inside train loop
beholder.update(
  session=sess,
  arrays=list_of_np_arrays,  # optional argument
  frame=two_dimensional_np_array,  # optional argument
)</pre>
            <p>
              If using <code>tf.train.MonitoredSession</code>, you can use
              <code>BeholderHook</code>:
            

            <pre>from tensorboard.plugins.beholder import BeholderHook
beholder_hook = BeholderHook(LOG_DIRECTORY)
with MonitoredSession(..., hooks=[beholder_hook]) as sess:
  sess.run(train_op)</pre>

            <p>
              If you think everything is set up properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/tensorboard/plugins/beholder/README.md">the README</a>
              for more information and consider filing an issue on GitHub.
            

            <p class="disclaimer">
              Note: Beholder currently only works well on local file systems.
            
          </div>
        </template>

        <template is="dom-if" if="[[_is_active]]">
          <tf-beholder-video id="video" fps="[[_FPS]]"></tf-beholder-video>

          <template is="dom-if" if="[[_valuesNotFrame(_values)]]">
            <tf-beholder-info id="info" fps="[[_FPS]]"> </tf-beholder-info>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>
    <style include="dashboard-style"></style>
    <style>
      .center {
        height: 100%;
        display: flex;
        padding: 0;
      }

      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0;
      }

      paper-checkbox {
        display: block;
        padding: 4px;
      }

      paper-radio-button {
        display: flex;
        padding: 5px;

        --paper-radio-button-radio-container: {
          flex-grow: 0;
          flex-shrink: 0;
        }

        --paper-radio-button-label: {
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      paper-radio-group {
        margin-top: 5px;
        width: 100%;
      }

      paper-slider {
        --paper-slider-active-color: var(--tb-orange-strong);
        --paper-slider-knob-color: var(--tb-orange-strong);
        --paper-slider-knob-start-border-color: var(--tb-orange-strong);
        --paper-slider-knob-start-color: var(--tb-orange-strong);
        --paper-slider-markers-color: var(--tb-orange-strong);
        --paper-slider-pin-color: var(--tb-orange-strong);
        --paper-slider-pin-start-color: var(--tb-orange-strong);
        flex-grow: 2;
      }

      pre {
        display: inline;
      }

      paper-button#record_button {
        color: #d32f2f;
      }

      paper-button#record_button.is-recording {
        background: #d32f2f;
        color: white;
      }

      .sidebar-section.beholder-dashboard:last-child {
        flex-grow: 0;
      }

      #colormap-selection {
        display: flex;
        margin-top: 5px;
      }

      #colormap-selection-label {
        margin-top: 13px;
      }

      #colormap-selection paper-dropdown-menu {
        margin-left: 10px;
        --paper-input-container-focus-color: var(--tb-orange-strong);
        width: 105px;
      }

      h4 {
        font-size: 14px;
        font-weight: normal;
        margin: 5px 0;
      }

      p.disclaimer {
        color: #999;
        font-style: italic;
      }

      p.controls-disabled-message {
        color: #c00;
        font-weight: bold;
      }

      .sidebar {
        font-size: 14px;
      }
    </style>
  </template>
  
</dom-module>



<iron-iconset-svg name="av" size="24">
<svg><defs>
<g id="add-to-queue"><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-7v2h-3v3h-2v-3H8v-2h3V7h2v3h3z" /></g>
<g id="airplay"><path d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></g>
<g id="album"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z" /></g>
<g id="art-track"><path d="M22 13h-8v-2h8v2zm0-6h-8v2h8V7zm-8 10h8v-2h-8v2zm-2-8v6c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2zm-1.5 6l-2.25-3-1.75 2.26-1.25-1.51L3.5 15h7z" /></g>
<g id="av-timer"><path d="M11 17c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1zm0-14v4h2V5.08c3.39.49 6 3.39 6 6.92 0 3.87-3.13 7-7 7s-7-3.13-7-7c0-1.68.59-3.22 1.58-4.42L12 13l1.41-1.41-6.8-6.8v.02C4.42 6.45 3 9.05 3 12c0 4.97 4.02 9 9 9 4.97 0 9-4.03 9-9s-4.03-9-9-9h-1zm7 9c0-.55-.45-1-1-1s-1 .45-1 1 .45 1 1 1 1-.45 1-1zM6 12c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1z" /></g>
<g id="branding-watermark"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16h-9v-6h9v6z" /></g>
<g id="call-to-action"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3v-3h18v3z" /></g>
<g id="closed-caption"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" /></g>
<g id="equalizer"><path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z" /></g>
<g id="explicit"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h4v2h-4v2h4v2H9V7h6v2z" /></g>
<g id="fast-forward"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" /></g>
<g id="fast-rewind"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" /></g>
<g id="featured-play-list"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 8H3V9h9v2zm0-4H3V5h9v2z" /></g>
<g id="featured-video"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 9H3V5h9v7z" /></g>
<g id="fiber-dvr"><path d="M17.5 10.5h2v1h-2zm-13 0h2v3h-2zM21 3H3c-1.11 0-2 .89-2 2v14c0 1.1.89 2 2 2h18c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zM8 13.5c0 .85-.65 1.5-1.5 1.5H3V9h3.5c.85 0 1.5.65 1.5 1.5v3zm4.62 1.5h-1.5L9.37 9h1.5l1 3.43 1-3.43h1.5l-1.75 6zM21 11.5c0 .6-.4 1.15-.9 1.4L21 15h-1.5l-.85-2H17.5v2H16V9h3.5c.85 0 1.5.65 1.5 1.5v1z" /></g>
<g id="fiber-manual-record"><circle cx="12" cy="12" r="8" /></g>
<g id="fiber-new"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zM8.5 15H7.3l-2.55-3.5V15H3.5V9h1.25l2.5 3.5V9H8.5v6zm5-4.74H11v1.12h2.5v1.26H11v1.11h2.5V15h-4V9h4v1.26zm7 3.74c0 .55-.45 1-1 1h-4c-.55 0-1-.45-1-1V9h1.25v4.51h1.13V9.99h1.25v3.51h1.12V9h1.25v5z" /></g>
<g id="fiber-pin"><path d="M5.5 10.5h2v1h-2zM20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zM9 11.5c0 .85-.65 1.5-1.5 1.5h-2v2H4V9h3.5c.85 0 1.5.65 1.5 1.5v1zm3.5 3.5H11V9h1.5v6zm7.5 0h-1.2l-2.55-3.5V15H15V9h1.25l2.5 3.5V9H20v6z" /></g>
<g id="fiber-smart-record"><g><circle cx="9" cy="12" r="8" /><path d="M17 4.26v2.09c2.33.82 4 3.04 4 5.65s-1.67 4.83-4 5.65v2.09c3.45-.89 6-4.01 6-7.74s-2.55-6.85-6-7.74z" /></g></g>
<g id="forward-10"><path d="M4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8zm6.8 3H10v-3.3L9 13v-.7l1.8-.6h.1V16zm4.3-1.8c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" /></g>
<g id="forward-30"><path d="M9.6 13.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5zM4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8z" /></g>
<g id="forward-5"><path d="M4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8zm6.7.9l.2-2.2h2.4v.7h-1.7l-.1.9s.1 0 .1-.1.1 0 .1-.1.1 0 .2 0h.2c.2 0 .4 0 .5.1s.3.2.4.3.2.3.3.5.1.4.1.6c0 .2 0 .4-.1.5s-.1.3-.3.5-.3.2-.5.3-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.3-.1-.5h.8c0 .2.1.3.2.4s.2.1.4.1c.1 0 .2 0 .3-.1l.2-.2s.1-.2.1-.3v-.6l-.1-.2-.2-.2s-.2-.1-.3-.1h-.2s-.1 0-.2.1-.1 0-.1.1-.1.1-.1.1h-.6z" /></g>
<g id="games"><path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z" /></g>
<g id="hd"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z" /></g>
<g id="hearing"><path d="M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5z" /></g>
<g id="high-quality"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 11H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z" /></g>
<g id="library-add"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z" /></g>
<g id="library-books"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z" /></g>
<g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z" /></g>
<g id="loop"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" /></g>
<g id="mic"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" /></g>
<g id="mic-none"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1.2-9.1c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2l-.01 6.2c0 .66-.53 1.2-1.19 1.2-.66 0-1.2-.54-1.2-1.2V4.9zm6.5 6.1c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" /></g>
<g id="mic-off"><path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" /></g>
<g id="movie"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" /></g>
<g id="music-video"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z" /></g>
<g id="new-releases"><path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z" /></g>
<g id="not-interested"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" /></g>
<g id="note"><path d="M22 10l-6-6H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99l16-.01c1.1 0 2-.89 2-1.99v-8zm-7-4.5l5.5 5.5H15V5.5z" /></g>
<g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></g>
<g id="pause-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z" /></g>
<g id="pause-circle-outline"><path d="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z" /></g>
<g id="play-arrow"><path d="M8 5v14l11-7z" /></g>
<g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" /></g>
<g id="play-circle-outline"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /></g>
<g id="playlist-add"><path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z" /></g>
<g id="playlist-add-check"><path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zM2 16h8v-2H2v2zm19.5-4.5L23 13l-6.99 7-4.51-4.5L13 14l3.01 3 5.49-5.5z" /></g>
<g id="playlist-play"><path d="M19 9H2v2h17V9zm0-4H2v2h17V5zM2 15h13v-2H2v2zm15-2v6l5-3-5-3z" /></g>
<g id="queue"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z" /></g>
<g id="queue-music"><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z" /></g>
<g id="queue-play-next"><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5c0-1.11-.9-2-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8l-4.5 4.5L18 21l3-3-3-3 1.5-1.5L24 18z" /></g>
<g id="radio"><path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.89 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.11-.89-2-2-2H8.3l8.26-3.34L15.88 1 3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-2h-2v2H4V8h16v4z" /></g>
<g id="recent-actors"><path d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z" /></g>
<g id="remove-from-queue"><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-7v2H8v-2h8z" /></g>
<g id="repeat"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" /></g>
<g id="repeat-one"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z" /></g>
<g id="replay"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" /></g>
<g id="replay-10"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-1.1 11H10v-3.3L9 13v-.7l1.8-.6h.1V16zm4.3-1.8c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1c.2.1.3.2.5.3s.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" /></g>
<g id="replay-30"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-2.4 8.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5c0-.1-.1-.2-.1-.3s-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" /></g>
<g id="replay-5"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-1.3 8.9l.2-2.2h2.4v.7h-1.7l-.1.9s.1 0 .1-.1.1 0 .1-.1.1 0 .2 0h.2c.2 0 .4 0 .5.1s.3.2.4.3.2.3.3.5.1.4.1.6c0 .2 0 .4-.1.5s-.1.3-.3.5-.3.2-.4.3-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.3-.1-.5h.8c0 .2.1.3.2.4s.2.1.4.1c.1 0 .2 0 .3-.1l.2-.2s.1-.2.1-.3v-.6l-.1-.2-.2-.2s-.2-.1-.3-.1h-.2s-.1 0-.2.1-.1 0-.1.1-.1.1-.1.1h-.7z" /></g>
<g id="shuffle"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" /></g>
<g id="skip-next"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" /></g>
<g id="skip-previous"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" /></g>
<g id="slow-motion-video"><path d="M13.05 9.79L10 7.5v9l3.05-2.29L16 12zm0 0L10 7.5v9l3.05-2.29L16 12zm0 0L10 7.5v9l3.05-2.29L16 12zM11 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69c1.11-.86 2.44-1.44 3.9-1.62zM5.69 7.1L4.26 5.68C3.05 7.16 2.25 8.99 2.05 11h2.02c.18-1.46.76-2.79 1.62-3.9zM4.07 13H2.05c.2 2.01 1 3.84 2.21 5.32l1.43-1.43c-.86-1.1-1.44-2.43-1.62-3.89zm1.61 6.74C7.16 20.95 9 21.75 11 21.95v-2.02c-1.46-.18-2.79-.76-3.9-1.62l-1.42 1.43zM22 12c0 5.16-3.92 9.42-8.95 9.95v-2.02C16.97 19.41 20 16.05 20 12s-3.03-7.41-6.95-7.93V2.05C18.08 2.58 22 6.84 22 12z" /></g>
<g id="snooze"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-3-9h3.63L9 15.2V17h6v-2h-3.63L15 10.8V9H9v2z" /></g>
<g id="sort-by-alpha"><path d="M14.94 4.66h-4.72l2.36-2.36zm-4.69 14.71h4.66l-2.33 2.33zM6.1 6.27L1.6 17.73h1.84l.92-2.45h5.11l.92 2.45h1.84L7.74 6.27H6.1zm-1.13 7.37l1.94-5.18 1.94 5.18H4.97zm10.76 2.5h6.12v1.59h-8.53v-1.29l5.92-8.56h-5.88v-1.6h8.3v1.26l-5.93 8.6z" /></g>
<g id="stop"><path d="M6 6h12v12H6z" /></g>
<g id="subscriptions"><path d="M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4l-6-3.27v6.53L16 16z" /></g>
<g id="subtitles"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" /></g>
<g id="surround-sound"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.76 16.24l-1.41 1.41C4.78 16.1 4 14.05 4 12c0-2.05.78-4.1 2.34-5.66l1.41 1.41C6.59 8.93 6 10.46 6 12s.59 3.07 1.76 4.24zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm5.66 1.66l-1.41-1.41C17.41 15.07 18 13.54 18 12s-.59-3.07-1.76-4.24l1.41-1.41C19.22 7.9 20 9.95 20 12c0 2.05-.78 4.1-2.34 5.66zM12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
<g id="video-call"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z" /></g>
<g id="video-label"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 13H3V5h18v11z" /></g>
<g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" /></g>
<g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></g>
<g id="videocam-off"><path d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" /></g>
<g id="volume-down"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" /></g>
<g id="volume-mute"><path d="M7 9v6h4l5 5V4l-5 5H7z" /></g>
<g id="volume-off"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" /></g>
<g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" /></g>
<g id="web"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" /></g>
<g id="web-asset"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z" /></g>
</defs></svg>
</iron-iconset-svg>



<iron-iconset-svg name="communication" size="24">
<svg><defs>
<g id="business"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" /></g>
<g id="call"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" /></g>
<g id="call-end"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" /></g>
<g id="call-made"><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z" /></g>
<g id="call-merge"><path d="M17 20.41L18.41 19 15 15.59 13.59 17 17 20.41zM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8z" /></g>
<g id="call-missed"><path d="M19.59 7L12 14.59 6.41 9H11V7H3v8h2v-4.59l7 7 9-9z" /></g>
<g id="call-missed-outgoing"><path d="M3 8.41l9 9 7-7V15h2V7h-8v2h4.59L12 14.59 4.41 7 3 8.41z" /></g>
<g id="call-received"><path d="M20 5.41L18.59 4 7 15.59V9H5v10h10v-2H8.41z" /></g>
<g id="call-split"><path d="M14 4l2.29 2.29-2.88 2.88 1.42 1.42 2.88-2.88L20 10V4zm-4 0H4v6l2.29-2.29 4.71 4.7V20h2v-8.41l-5.29-5.3z" /></g>
<g id="chat"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" /></g>
<g id="chat-bubble"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" /></g>
<g id="chat-bubble-outline"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" /></g>
<g id="clear-all"><path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z" /></g>
<g id="comment"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" /></g>
<g id="contact-mail"><path d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z" /></g>
<g id="contact-phone"><path d="M22 3H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm3.85-4h1.64L21 16l-1.99 1.99c-1.31-.98-2.28-2.38-2.73-3.99-.18-.64-.28-1.31-.28-2s.1-1.36.28-2c.45-1.62 1.42-3.01 2.73-3.99L21 8l-1.51 2h-1.64c-.22.63-.35 1.3-.35 2s.13 1.37.35 2z" /></g>
<g id="contacts"><path d="M20 0H4v2h16V0zM4 24h16v-2H4v2zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 2.75c1.24 0 2.25 1.01 2.25 2.25s-1.01 2.25-2.25 2.25S9.75 10.24 9.75 9 10.76 6.75 12 6.75zM17 17H7v-1.5c0-1.67 3.33-2.5 5-2.5s5 .83 5 2.5V17z" /></g>
<g id="dialer-sip"><path d="M17 3h-1v5h1V3zm-2 2h-2V4h2V3h-3v3h2v1h-2v1h3V5zm3-2v5h1V6h2V3h-3zm2 2h-1V4h1v1zm0 10.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.01.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.27-.26.35-.65.24-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z" /></g>
<g id="dialpad"><path d="M12 19c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12-8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
<g id="email"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" /></g>
<g id="forum"><path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" /></g>
<g id="import-contacts"><path d="M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z" /></g>
<g id="import-export"><path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z" /></g>
<g id="invert-colors-off"><path d="M20.65 20.87l-2.35-2.35-6.3-6.29-3.56-3.57-1.42-1.41L4.27 4.5 3 5.77l2.78 2.78c-2.55 3.14-2.36 7.76.56 10.69C7.9 20.8 9.95 21.58 12 21.58c1.79 0 3.57-.59 5.03-1.78l2.7 2.7L21 21.23l-.35-.36zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59c0-1.32.43-2.57 1.21-3.6L12 14.77v4.82zM12 5.1v4.58l7.25 7.26c1.37-2.96.84-6.57-1.6-9.01L12 2.27l-3.7 3.7 1.41 1.41L12 5.1z" /></g>
<g id="live-help"><path d="M19 2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-6 16h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 11.9 13 12.5 13 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></g>
<g id="location-off"><path d="M12 6.5c1.38 0 2.5 1.12 2.5 2.5 0 .74-.33 1.39-.83 1.85l3.63 3.63c.98-1.86 1.7-3.8 1.7-5.48 0-3.87-3.13-7-7-7-1.98 0-3.76.83-5.04 2.15l3.19 3.19c.46-.52 1.11-.84 1.85-.84zm4.37 9.6l-4.63-4.63-.11-.11L3.27 3 2 4.27l3.18 3.18C5.07 7.95 5 8.47 5 9c0 5.25 7 13 7 13s1.67-1.85 3.38-4.35L18.73 21 20 19.73l-3.63-3.63z" /></g>
<g id="location-on"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /></g>
<g id="mail-outline"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z" /></g>
<g id="message"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" /></g>
<g id="no-sim"><path d="M18.99 5c0-1.1-.89-2-1.99-2h-7L7.66 5.34 19 16.68 18.99 5zM3.65 3.88L2.38 5.15 5 7.77V19c0 1.1.9 2 2 2h10.01c.35 0 .67-.1.96-.26l1.88 1.88 1.27-1.27L3.65 3.88z" /></g>
<g id="phone"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" /></g>
<g id="phonelink-erase"><path d="M13 8.2l-1-1-4 4-4-4-1 1 4 4-4 4 1 1 4-4 4 4 1-1-4-4 4-4zM19 1H9c-1.1 0-2 .9-2 2v3h2V4h10v16H9v-2H7v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2z" /></g>
<g id="phonelink-lock"><path d="M19 1H9c-1.1 0-2 .9-2 2v3h2V4h10v16H9v-2H7v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-8.2 10V9.5C10.8 8.1 9.4 7 8 7S5.2 8.1 5.2 9.5V11c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3zm-1.3 0h-3V9.5c0-.8.7-1.3 1.5-1.3s1.5.5 1.5 1.3V11z" /></g>
<g id="phonelink-ring"><path d="M20.1 7.7l-1 1c1.8 1.8 1.8 4.6 0 6.5l1 1c2.5-2.3 2.5-6.1 0-8.5zM18 9.8l-1 1c.5.7.5 1.6 0 2.3l1 1c1.2-1.2 1.2-3 0-4.3zM14 1H4c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 19H4V4h10v16z" /></g>
<g id="phonelink-setup"><path d="M11.8 12.5v-1l1.1-.8c.1-.1.1-.2.1-.3l-1-1.7c-.1-.1-.2-.2-.3-.1l-1.3.4c-.3-.2-.6-.4-.9-.5l-.2-1.3c0-.1-.1-.2-.3-.2H7c-.1 0-.2.1-.3.2l-.2 1.3c-.3.1-.6.3-.9.5l-1.3-.5c-.1 0-.2 0-.3.1l-1 1.7c-.1.1 0 .2.1.3l1.1.8v1l-1.1.8c-.1.2-.1.3-.1.4l1 1.7c.1.1.2.2.3.1l1.4-.4c.3.2.6.4.9.5l.2 1.3c-.1.1.1.2.2.2h2c.1 0 .2-.1.3-.2l.2-1.3c.3-.1.6-.3.9-.5l1.3.5c.1 0 .2 0 .3-.1l1-1.7c.1-.1 0-.2-.1-.3l-1.1-.9zM8 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM19 1H9c-1.1 0-2 .9-2 2v3h2V4h10v16H9v-2H7v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2z" /></g>
<g id="portable-wifi-off"><path d="M17.56 14.24c.28-.69.44-1.45.44-2.24 0-3.31-2.69-6-6-6-.79 0-1.55.16-2.24.44l1.62 1.62c.2-.03.41-.06.62-.06 2.21 0 4 1.79 4 4 0 .21-.02.42-.05.63l1.61 1.61zM12 4c4.42 0 8 3.58 8 8 0 1.35-.35 2.62-.95 3.74l1.47 1.47C21.46 15.69 22 13.91 22 12c0-5.52-4.48-10-10-10-1.91 0-3.69.55-5.21 1.47l1.46 1.46C9.37 4.34 10.65 4 12 4zM3.27 2.5L2 3.77l2.1 2.1C2.79 7.57 2 9.69 2 12c0 3.7 2.01 6.92 4.99 8.65l1-1.73C5.61 17.53 4 14.96 4 12c0-1.76.57-3.38 1.53-4.69l1.43 1.44C6.36 9.68 6 10.8 6 12c0 2.22 1.21 4.15 3 5.19l1-1.74c-1.19-.7-2-1.97-2-3.45 0-.65.17-1.25.44-1.79l1.58 1.58L10 12c0 1.1.9 2 2 2l.21-.02.01.01 7.51 7.51L21 20.23 4.27 3.5l-1-1z" /></g>
<g id="present-to-all"><path d="M21 3H3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h18c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 16.02H3V4.98h18v14.04zM10 12H8l4-4 4 4h-2v4h-4v-4z" /></g>
<g id="ring-volume"><path d="M23.71 16.67C20.66 13.78 16.54 12 12 12 7.46 12 3.34 13.78.29 16.67c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l2.48 2.48c.18.18.43.29.71.29.27 0 .52-.11.7-.28.79-.74 1.69-1.36 2.66-1.85.33-.16.56-.5.56-.9v-3.1c1.45-.48 3-.73 4.6-.73s3.15.25 4.6.72v3.1c0 .39.23.74.56.9.98.49 1.87 1.12 2.66 1.85.18.18.43.28.7.28.28 0 .53-.11.71-.29l2.48-2.48c.18-.18.29-.43.29-.71 0-.27-.11-.52-.29-.7zM21.16 6.26l-1.41-1.41-3.56 3.55 1.41 1.41s3.45-3.52 3.56-3.55zM13 2h-2v5h2V2zM6.4 9.81L7.81 8.4 4.26 4.84 2.84 6.26c.11.03 3.56 3.55 3.56 3.55z" /></g>
<g id="rss-feed"><circle cx="6.18" cy="17.82" r="2.18" /><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z" /></g>
<g id="screen-share"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.11-.9-2-2-2H4c-1.11 0-2 .89-2 2v10c0 1.1.89 2 2 2H0v2h24v-2h-4zm-7-3.53v-2.19c-2.78 0-4.61.85-6 2.72.56-2.67 2.11-5.33 6-5.87V7l4 3.73-4 3.74z" /></g>
<g id="speaker-phone"><path d="M7 7.07L8.43 8.5c.91-.91 2.18-1.48 3.57-1.48s2.66.57 3.57 1.48L17 7.07C15.72 5.79 13.95 5 12 5s-3.72.79-5 2.07zM12 1C8.98 1 6.24 2.23 4.25 4.21l1.41 1.41C7.28 4 9.53 3 12 3s4.72 1 6.34 2.62l1.41-1.41C17.76 2.23 15.02 1 12 1zm2.86 9.01L9.14 10C8.51 10 8 10.51 8 11.14v9.71c0 .63.51 1.14 1.14 1.14h5.71c.63 0 1.14-.51 1.14-1.14v-9.71c.01-.63-.5-1.13-1.13-1.13zM15 20H9v-8h6v8z" /></g>
<g id="stay-current-landscape"><path d="M1.01 7L1 17c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2H3c-1.1 0-1.99.9-1.99 2zM19 7v10H5V7h14z" /></g>
<g id="stay-current-portrait"><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z" /></g>
<g id="stay-primary-landscape"><path d="M1.01 7L1 17c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2H3c-1.1 0-1.99.9-1.99 2zM19 7v10H5V7h14z" /></g>
<g id="stay-primary-portrait"><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z" /></g>
<g id="stop-screen-share"><path d="M21.22 18.02l2 2H24v-2h-2.78zm.77-2l.01-10c0-1.11-.9-2-2-2H7.22l5.23 5.23c.18-.04.36-.07.55-.1V7.02l4 3.73-1.58 1.47 5.54 5.54c.61-.33 1.03-.99 1.03-1.74zM2.39 1.73L1.11 3l1.54 1.54c-.4.36-.65.89-.65 1.48v10c0 1.1.89 2 2 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 1.73zM7 15.02c.31-1.48.92-2.95 2.07-4.06l1.59 1.59c-1.54.38-2.7 1.18-3.66 2.47z" /></g>
<g id="swap-calls"><path d="M18 4l-4 4h3v7c0 1.1-.9 2-2 2s-2-.9-2-2V8c0-2.21-1.79-4-4-4S5 5.79 5 8v7H2l4 4 4-4H7V8c0-1.1.9-2 2-2s2 .9 2 2v7c0 2.21 1.79 4 4 4s4-1.79 4-4V8h3l-4-4z" /></g>
<g id="textsms"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z" /></g>
<g id="voicemail"><path d="M18.5 6C15.46 6 13 8.46 13 11.5c0 1.33.47 2.55 1.26 3.5H9.74c.79-.95 1.26-2.17 1.26-3.5C11 8.46 8.54 6 5.5 6S0 8.46 0 11.5 2.46 17 5.5 17h13c3.04 0 5.5-2.46 5.5-5.5S21.54 6 18.5 6zm-13 9C3.57 15 2 13.43 2 11.5S3.57 8 5.5 8 9 9.57 9 11.5 7.43 15 5.5 15zm13 0c-1.93 0-3.5-1.57-3.5-3.5S16.57 8 18.5 8 22 9.57 22 11.5 20.43 15 18.5 15z" /></g>
<g id="vpn-key"><path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" /></g>
</defs></svg>
</iron-iconset-svg>




<iron-iconset-svg name="editor" size="24">
<svg><defs>
<g id="attach-file"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" /></g>
<g id="attach-money"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z" /></g>
<g id="border-all"><path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z" /></g>
<g id="border-bottom"><path d="M9 11H7v2h2v-2zm4 4h-2v2h2v-2zM9 3H7v2h2V3zm4 8h-2v2h2v-2zM5 3H3v2h2V3zm8 4h-2v2h2V7zm4 4h-2v2h2v-2zm-4-8h-2v2h2V3zm4 0h-2v2h2V3zm2 10h2v-2h-2v2zm0 4h2v-2h-2v2zM5 7H3v2h2V7zm14-4v2h2V3h-2zm0 6h2V7h-2v2zM5 11H3v2h2v-2zM3 21h18v-2H3v2zm2-6H3v2h2v-2z" /></g>
<g id="border-clear"><path d="M7 5h2V3H7v2zm0 8h2v-2H7v2zm0 8h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm-8 0h2v-2H3v2zm0-4h2v-2H3v2zm0-4h2v-2H3v2zm0-4h2V7H3v2zm0-4h2V3H3v2zm8 8h2v-2h-2v2zm8 4h2v-2h-2v2zm0-4h2v-2h-2v2zm0 8h2v-2h-2v2zm0-12h2V7h-2v2zm-8 0h2V7h-2v2zm8-6v2h2V3h-2zm-8 2h2V3h-2v2zm4 16h2v-2h-2v2zm0-8h2v-2h-2v2zm0-8h2V3h-2v2z" /></g>
<g id="border-color"><path d="M17.75 7L14 3.25l-10 10V17h3.75l10-10zm2.96-2.96c.39-.39.39-1.02 0-1.41L18.37.29c-.39-.39-1.02-.39-1.41 0L15 2.25 18.75 6l1.96-1.96z" /><path fill-opacity=".36" d="M0 20h24v4H0z" /></g>
<g id="border-horizontal"><path d="M3 21h2v-2H3v2zM5 7H3v2h2V7zM3 17h2v-2H3v2zm4 4h2v-2H7v2zM5 3H3v2h2V3zm4 0H7v2h2V3zm8 0h-2v2h2V3zm-4 4h-2v2h2V7zm0-4h-2v2h2V3zm6 14h2v-2h-2v2zm-8 4h2v-2h-2v2zm-8-8h18v-2H3v2zM19 3v2h2V3h-2zm0 6h2V7h-2v2zm-8 8h2v-2h-2v2zm4 4h2v-2h-2v2zm4 0h2v-2h-2v2z" /></g>
<g id="border-inner"><path d="M3 21h2v-2H3v2zm4 0h2v-2H7v2zM5 7H3v2h2V7zM3 17h2v-2H3v2zM9 3H7v2h2V3zM5 3H3v2h2V3zm12 0h-2v2h2V3zm2 6h2V7h-2v2zm0-6v2h2V3h-2zm-4 18h2v-2h-2v2zM13 3h-2v8H3v2h8v8h2v-8h8v-2h-8V3zm6 18h2v-2h-2v2zm0-4h2v-2h-2v2z" /></g>
<g id="border-left"><path d="M11 21h2v-2h-2v2zm0-4h2v-2h-2v2zm0-12h2V3h-2v2zm0 4h2V7h-2v2zm0 4h2v-2h-2v2zm-4 8h2v-2H7v2zM7 5h2V3H7v2zm0 8h2v-2H7v2zm-4 8h2V3H3v18zM19 9h2V7h-2v2zm-4 12h2v-2h-2v2zm4-4h2v-2h-2v2zm0-14v2h2V3h-2zm0 10h2v-2h-2v2zm0 8h2v-2h-2v2zm-4-8h2v-2h-2v2zm0-8h2V3h-2v2z" /></g>
<g id="border-outer"><path d="M13 7h-2v2h2V7zm0 4h-2v2h2v-2zm4 0h-2v2h2v-2zM3 3v18h18V3H3zm16 16H5V5h14v14zm-6-4h-2v2h2v-2zm-4-4H7v2h2v-2z" /></g>
<g id="border-right"><path d="M7 21h2v-2H7v2zM3 5h2V3H3v2zm4 0h2V3H7v2zm0 8h2v-2H7v2zm-4 8h2v-2H3v2zm8 0h2v-2h-2v2zm-8-8h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm8 8h2v-2h-2v2zm4-4h2v-2h-2v2zm4-10v18h2V3h-2zm-4 18h2v-2h-2v2zm0-16h2V3h-2v2zm-4 8h2v-2h-2v2zm0-8h2V3h-2v2zm0 4h2V7h-2v2z" /></g>
<g id="border-style"><path d="M15 21h2v-2h-2v2zm4 0h2v-2h-2v2zM7 21h2v-2H7v2zm4 0h2v-2h-2v2zm8-4h2v-2h-2v2zm0-4h2v-2h-2v2zM3 3v18h2V5h16V3H3zm16 6h2V7h-2v2z" /></g>
<g id="border-top"><path d="M7 21h2v-2H7v2zm0-8h2v-2H7v2zm4 0h2v-2h-2v2zm0 8h2v-2h-2v2zm-8-4h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2v-2H3v2zm0-4h2V7H3v2zm8 8h2v-2h-2v2zm8-8h2V7h-2v2zm0 4h2v-2h-2v2zM3 3v2h18V3H3zm16 14h2v-2h-2v2zm-4 4h2v-2h-2v2zM11 9h2V7h-2v2zm8 12h2v-2h-2v2zm-4-8h2v-2h-2v2z" /></g>
<g id="border-vertical"><path d="M3 9h2V7H3v2zm0-4h2V3H3v2zm4 16h2v-2H7v2zm0-8h2v-2H7v2zm-4 0h2v-2H3v2zm0 8h2v-2H3v2zm0-4h2v-2H3v2zM7 5h2V3H7v2zm12 12h2v-2h-2v2zm-8 4h2V3h-2v18zm8 0h2v-2h-2v2zm0-8h2v-2h-2v2zm0-10v2h2V3h-2zm0 6h2V7h-2v2zm-4-4h2V3h-2v2zm0 16h2v-2h-2v2zm0-8h2v-2h-2v2z" /></g>
<g id="bubble-chart"><circle cx="7.2" cy="14.4" r="3.2" /><circle cx="14.8" cy="18" r="2" /><circle cx="15.2" cy="8.8" r="4.8" /></g>
<g id="drag-handle"><path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z" /></g>
<g id="format-align-center"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" /></g>
<g id="format-align-justify"><path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z" /></g>
<g id="format-align-left"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" /></g>
<g id="format-align-right"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" /></g>
<g id="format-bold"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" /></g>
<g id="format-clear"><path d="M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21 18 19.73 3.55 5.27 3.27 5zM6 5v.18L8.82 8h2.4l-.72 1.68 2.1 2.1L14.21 8H20V5H6z" /></g>
<g id="format-color-fill"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" /><path fill-opacity=".36" d="M0 20h24v4H0z" /></g>
<g id="format-color-reset"><path d="M18 14c0-4-6-10.8-6-10.8s-1.33 1.51-2.73 3.52l8.59 8.59c.09-.42.14-.86.14-1.31zm-.88 3.12L12.5 12.5 5.27 5.27 4 6.55l3.32 3.32C6.55 11.32 6 12.79 6 14c0 3.31 2.69 6 6 6 1.52 0 2.9-.57 3.96-1.5l2.63 2.63 1.27-1.27-2.74-2.74z" /></g>
<g id="format-color-text"><path fill-opacity=".36" d="M0 20h24v4H0z" /><path d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z" /></g>
<g id="format-indent-decrease"><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" /></g>
<g id="format-indent-increase"><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" /></g>
<g id="format-italic"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" /></g>
<g id="format-line-spacing"><path d="M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm4-2v2h12V5H10zm0 14h12v-2H10v2zm0-6h12v-2H10v2z" /></g>
<g id="format-list-bulleted"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" /></g>
<g id="format-list-numbered"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" /></g>
<g id="format-paint"><path d="M18 4V3c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6h1v4H9v11c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-9h8V4h-3z" /></g>
<g id="format-quote"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" /></g>
<g id="format-shapes"><path d="M23 7V1h-6v2H7V1H1v6h2v10H1v6h6v-2h10v2h6v-6h-2V7h2zM3 3h2v2H3V3zm2 18H3v-2h2v2zm12-2H7v-2H5V7h2V5h10v2h2v10h-2v2zm4 2h-2v-2h2v2zM19 5V3h2v2h-2zm-5.27 9h-3.49l-.73 2H7.89l3.4-9h1.4l3.41 9h-1.63l-.74-2zm-3.04-1.26h2.61L12 8.91l-1.31 3.83z" /></g>
<g id="format-size"><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z" /></g>
<g id="format-strikethrough"><path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" /></g>
<g id="format-textdirection-l-to-r"><path d="M9 10v5h2V4h2v11h2V4h2V2H9C6.79 2 5 3.79 5 6s1.79 4 4 4zm12 8l-4-4v3H5v2h12v3l4-4z" /></g>
<g id="format-textdirection-r-to-l"><path d="M10 10v5h2V4h2v11h2V4h2V2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4zm-2 7v-3l-4 4 4 4v-3h12v-2H8z" /></g>
<g id="format-underlined"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" /></g>
<g id="functions"><path d="M18 4H6v2l6.5 6L6 18v2h12v-3h-7l5-5-5-5h7z" /></g>
<g id="highlight"><path d="M6 14l3 3v5h6v-5l3-3V9H6zm5-12h2v3h-2zM3.5 5.875L4.914 4.46l2.12 2.122L5.62 7.997zm13.46.71l2.123-2.12 1.414 1.414L18.375 8z" /></g>
<g id="insert-chart"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" /></g>
<g id="insert-comment"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" /></g>
<g id="insert-drive-file"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z" /></g>
<g id="insert-emoticon"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" /></g>
<g id="insert-invitation"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" /></g>
<g id="insert-link"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" /></g>
<g id="insert-photo"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" /></g>
<g id="linear-scale"><path d="M19.5 9.5c-1.03 0-1.9.62-2.29 1.5h-2.92c-.39-.88-1.26-1.5-2.29-1.5s-1.9.62-2.29 1.5H6.79c-.39-.88-1.26-1.5-2.29-1.5C3.12 9.5 2 10.62 2 12s1.12 2.5 2.5 2.5c1.03 0 1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5s1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5 1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5z" /></g>
<g id="merge-type"><path d="M17 20.41L18.41 19 15 15.59 13.59 17 17 20.41zM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8z" /></g>
<g id="mode-comment"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z" /></g>
<g id="mode-edit"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /></g>
<g id="monetization-on"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z" /></g>
<g id="money-off"><path d="M12.5 6.9c1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-.53.12-1.03.3-1.48.54l1.47 1.47c.41-.17.91-.27 1.51-.27zM5.33 4.06L4.06 5.33 7.5 8.77c0 2.08 1.56 3.21 3.91 3.91l3.51 3.51c-.34.48-1.05.91-2.42.91-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c.96-.18 1.82-.55 2.45-1.12l2.22 2.22 1.27-1.27L5.33 4.06z" /></g>
<g id="multiline-chart"><path d="M22 6.92l-1.41-1.41-2.85 3.21C15.68 6.4 12.83 5 9.61 5 6.72 5 4.07 6.16 2 8l1.42 1.42C5.12 7.93 7.27 7 9.61 7c2.74 0 5.09 1.26 6.77 3.24l-2.88 3.24-4-4L2 16.99l1.5 1.5 6-6.01 4 4 4.05-4.55c.75 1.35 1.25 2.9 1.44 4.55H21c-.22-2.3-.95-4.39-2.04-6.14L22 6.92z" /></g>
<g id="pie-chart"><path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z" /></g>
<g id="pie-chart-outlined"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 2.07c3.61.45 6.48 3.33 6.93 6.93H13V4.07zM4 12c0-4.06 3.07-7.44 7-7.93v15.87c-3.93-.5-7-3.88-7-7.94zm9 7.93V13h6.93c-.45 3.61-3.32 6.48-6.93 6.93z" /></g>
<g id="publish"><path d="M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z" /></g>
<g id="short-text"><path d="M4 9h16v2H4zm0 4h10v2H4z" /></g>
<g id="show-chart"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z" /></g>
<g id="space-bar"><path d="M18 9v4H6V9H4v6h16V9z" /></g>
<g id="strikethrough-s"><path d="M7.24 8.75c-.26-.48-.39-1.03-.39-1.67 0-.61.13-1.16.4-1.67.26-.5.63-.93 1.11-1.29.48-.35 1.05-.63 1.7-.83.66-.19 1.39-.29 2.18-.29.81 0 1.54.11 2.21.34.66.22 1.23.54 1.69.94.47.4.83.88 1.08 1.43.25.55.38 1.15.38 1.81h-3.01c0-.31-.05-.59-.15-.85-.09-.27-.24-.49-.44-.68-.2-.19-.45-.33-.75-.44-.3-.1-.66-.16-1.06-.16-.39 0-.74.04-1.03.13-.29.09-.53.21-.72.36-.19.16-.34.34-.44.55-.1.21-.15.43-.15.66 0 .48.25.88.74 1.21.38.25.77.48 1.41.7H7.39c-.05-.08-.11-.17-.15-.25zM21 12v-2H3v2h9.62c.18.07.4.14.55.2.37.17.66.34.87.51.21.17.35.36.43.57.07.2.11.43.11.69 0 .23-.05.45-.14.66-.09.2-.23.38-.42.53-.19.15-.42.26-.71.35-.29.08-.63.13-1.01.13-.43 0-.83-.04-1.18-.13s-.66-.23-.91-.42c-.25-.19-.45-.44-.59-.75-.14-.31-.25-.76-.25-1.21H6.4c0 .55.08 1.13.24 1.58.16.45.37.85.65 1.21.28.35.6.66.98.92.37.26.78.48 1.22.65.44.17.9.3 1.38.39.48.08.96.13 1.44.13.8 0 1.53-.09 2.18-.28s1.21-.45 1.67-.79c.46-.34.82-.77 1.07-1.27s.38-1.07.38-1.71c0-.6-.1-1.14-.31-1.61-.05-.11-.11-.23-.17-.33H21z" /></g>
<g id="text-fields"><path d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z" /></g>
<g id="title"><path d="M5 4v3h5.5v12h3V7H19V4z" /></g>
<g id="vertical-align-bottom"><path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z" /></g>
<g id="vertical-align-center"><path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z" /></g>
<g id="vertical-align-top"><path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z" /></g>
<g id="wrap-text"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3 3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z" /></g>
</defs></svg>
</iron-iconset-svg>



<iron-iconset-svg name="hardware" size="24">
<svg><defs>
<g id="cast"><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z" /></g>
<g id="cast-connected"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></g>
<g id="computer"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" /></g>
<g id="desktop-mac"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z" /></g>
<g id="desktop-windows"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z" /></g>
<g id="developer-board"><path d="M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6 13h5v4H6zm6-6h4v3h-4zM6 7h5v5H6zm6 4h4v6h-4z" /></g>
<g id="device-hub"><path d="M17 16l-4-4V8.82C14.16 8.4 15 7.3 15 6c0-1.66-1.34-3-3-3S9 4.34 9 6c0 1.3.84 2.4 2 2.82V12l-4 4H3v5h5v-3.05l4-4.2 4 4.2V21h5v-5h-4z" /></g>
<g id="devices-other"><path d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.34 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z" /></g>
<g id="dock"><path d="M8 23h8v-2H8v2zm8-21.99L8 1c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM16 15H8V5h8v10z" /></g>
<g id="gamepad"><path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z" /></g>
<g id="headset"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z" /></g>
<g id="headset-mic"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h4v1h-7v2h6c1.66 0 3-1.34 3-3V10c0-4.97-4.03-9-9-9z" /></g>
<g id="keyboard"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z" /></g>
<g id="keyboard-arrow-down"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" /></g>
<g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" /></g>
<g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" /></g>
<g id="keyboard-arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" /></g>
<g id="keyboard-backspace"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" /></g>
<g id="keyboard-capslock"><path d="M12 8.41L16.59 13 18 11.59l-6-6-6 6L7.41 13 12 8.41zM6 18h12v-2H6v2z" /></g>
<g id="keyboard-hide"><path d="M20 3H4c-1.1 0-1.99.9-1.99 2L2 15c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 3h2v2h-2V6zm0 3h2v2h-2V9zM8 6h2v2H8V6zm0 3h2v2H8V9zm-1 2H5V9h2v2zm0-3H5V6h2v2zm9 7H8v-2h8v2zm0-4h-2V9h2v2zm0-3h-2V6h2v2zm3 3h-2V9h2v2zm0-3h-2V6h2v2zm-7 15l4-4H8l4 4z" /></g>
<g id="keyboard-return"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z" /></g>
<g id="keyboard-tab"><path d="M11.59 7.41L15.17 11H1v2h14.17l-3.59 3.59L13 18l6-6-6-6-1.41 1.41zM20 6v12h2V6h-2z" /></g>
<g id="keyboard-voice"><path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" /></g>
<g id="laptop"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" /></g>
<g id="laptop-chromebook"><path d="M22 18V3H2v15H0v2h24v-2h-2zm-8 0h-4v-1h4v1zm6-3H4V5h16v10z" /></g>
<g id="laptop-mac"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" /></g>
<g id="laptop-windows"><path d="M20 18v-1c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2v1H0v2h24v-2h-4zM4 5h16v10H4V5z" /></g>
<g id="memory"><path d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z" /></g>
<g id="mouse"><path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z" /></g>
<g id="phone-android"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z" /></g>
<g id="phone-iphone"><path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z" /></g>
<g id="phonelink"><path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z" /></g>
<g id="phonelink-off"><path d="M22 6V4H6.82l2 2H22zM1.92 1.65L.65 2.92l1.82 1.82C2.18 5.08 2 5.52 2 6v11H0v3h17.73l2.35 2.35 1.27-1.27L3.89 3.62 1.92 1.65zM4 6.27L14.73 17H4V6.27zM23 8h-6c-.55 0-1 .45-1 1v4.18l2 2V10h4v7h-2.18l3 3H23c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1z" /></g>
<g id="power-input"><path d="M2 9v2h19V9H2zm0 6h5v-2H2v2zm7 0h5v-2H9v2zm7 0h5v-2h-5v2z" /></g>
<g id="router"><path d="M20.2 5.9l.8-.8C19.6 3.7 17.8 3 16 3s-3.6.7-5 2.1l.8.8C13 4.8 14.5 4.2 16 4.2s3 .6 4.2 1.7zm-.9.8c-.9-.9-2.1-1.4-3.3-1.4s-2.4.5-3.3 1.4l.8.8c.7-.7 1.6-1 2.5-1 .9 0 1.8.3 2.5 1l.8-.8zM19 13h-2V9h-2v4H5c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM8 18H6v-2h2v2zm3.5 0h-2v-2h2v2zm3.5 0h-2v-2h2v2z" /></g>
<g id="scanner"><path d="M19.8 10.7L4.2 5l-.7 1.9L17.6 12H5c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5.5c0-.8-.5-1.6-1.2-1.8zM7 17H5v-2h2v2zm12 0H9v-2h10v2z" /></g>
<g id="security"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" /></g>
<g id="sim-card"><path d="M19.99 4c0-1.1-.89-2-1.99-2h-8L4 8v12c0 1.1.9 2 2 2h12.01c1.1 0 1.99-.9 1.99-2l-.01-16zM9 19H7v-2h2v2zm8 0h-2v-2h2v2zm-8-4H7v-4h2v4zm4 4h-2v-4h2v4zm0-6h-2v-2h2v2zm4 2h-2v-4h2v4z" /></g>
<g id="smartphone"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z" /></g>
<g id="speaker"><path d="M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 1.99 2 1.99L17 22c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 2c1.1 0 2 .9 2 2s-.9 2-2 2c-1.11 0-2-.9-2-2s.89-2 2-2zm0 16c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" /></g>
<g id="speaker-group"><path d="M18.2 1H9.8C8.81 1 8 1.81 8 2.8v14.4c0 .99.81 1.79 1.8 1.79l8.4.01c.99 0 1.8-.81 1.8-1.8V2.8c0-.99-.81-1.8-1.8-1.8zM14 3c1.1 0 2 .89 2 2s-.9 2-2 2-2-.89-2-2 .9-2 2-2zm0 13.5c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" /><circle cx="14" cy="12.5" r="2.5" /><path d="M6 5H4v16c0 1.1.89 2 2 2h10v-2H6V5z" /></g>
<g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z" /></g>
<g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" /></g>
<g id="tablet-mac"><path d="M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z" /></g>
<g id="toys"><path d="M12 12c0-3 2.5-5.5 5.5-5.5S23 9 23 12H12zm0 0c0 3-2.5 5.5-5.5 5.5S1 15 1 12h11zm0 0c-3 0-5.5-2.5-5.5-5.5S9 1 12 1v11zm0 0c3 0 5.5 2.5 5.5 5.5S15 23 12 23V12z" /></g>
<g id="tv"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" /></g>
<g id="videogame-asset"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /></g>
<g id="watch"><path d="M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z" /></g>
</defs></svg>
</iron-iconset-svg>








<dom-module id="iron-pages">

  <template>
    <style>
      :host {
        display: block;
      }

      :host > ::slotted(:not(slot):not(.iron-selected)) {
        display: none !important;
      }
    </style>

    <slot></slot>
  </template>

  
</dom-module>





















<dom-module id="paper-tab">
  <template>
    <style>
      :host {
        @apply --layout-inline;
        @apply --layout-center;
        @apply --layout-center-justified;
        @apply --layout-flex-auto;

        position: relative;
        padding: 0 12px;
        overflow: hidden;
        cursor: pointer;
        vertical-align: middle;

        @apply --paper-font-common-base;
        @apply --paper-tab;
      }

      :host(:focus) {
        outline: none;
      }

      :host([link]) {
        padding: 0;
      }

      .tab-content {
        height: 100%;
        transform: translateZ(0);
          -webkit-transform: translateZ(0);
        transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
        @apply --layout-horizontal;
        @apply --layout-center-center;
        @apply --layout-flex-auto;
        @apply --paper-tab-content;
      }

      :host(:not(.iron-selected)) > .tab-content {
        opacity: 0.8;

        @apply --paper-tab-content-unselected;
      }

      :host(:focus) .tab-content {
        opacity: 1;
        font-weight: 700;
      }

      paper-ripple {
        color: var(--paper-tab-ink, var(--paper-yellow-a100));
      }

      .tab-content > ::slotted(a) {
        @apply --layout-flex-auto;

        height: 100%;
      }
    </style>

    <div class="tab-content">
      <slot></slot>
    </div>
  </template>

  
</dom-module>










<iron-iconset-svg name="paper-tabs" size="24">
<svg><defs>
<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" /></g>
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /></g>
</defs></svg>
</iron-iconset-svg>





<dom-module id="paper-tabs">
  <template>
    <style>
      :host {
        @apply --layout;
        @apply --layout-center;

        height: 48px;
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;

        /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;

        @apply --paper-tabs;
      }

      :host(:dir(rtl)) {
        @apply --layout-horizontal-reverse;
      }

      #tabsContainer {
        position: relative;
        height: 100%;
        white-space: nowrap;
        overflow: hidden;
        @apply --layout-flex-auto;
        @apply --paper-tabs-container;
      }

      #tabsContent {
        height: 100%;
        -moz-flex-basis: auto;
        -ms-flex-basis: auto;
        flex-basis: auto;
        @apply --paper-tabs-content;
      }

      #tabsContent.scrollable {
        position: absolute;
        white-space: nowrap;
      }

      #tabsContent:not(.scrollable),
      #tabsContent.scrollable.fit-container {
        @apply --layout-horizontal;
      }

      #tabsContent.scrollable.fit-container {
        min-width: 100%;
      }

      #tabsContent.scrollable.fit-container > ::slotted(*) {
        /* IE - prevent tabs from compressing when they should scroll. */
        -ms-flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
        flex: 1 0 auto;
      }

      .hidden {
        display: none;
      }

      .not-visible {
        opacity: 0;
        cursor: default;
      }

      paper-icon-button {
        width: 48px;
        height: 48px;
        padding: 12px;
        margin: 0 4px;
      }

      #selectionBar {
        position: absolute;
        height: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom: 2px solid var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100));
          -webkit-transform: scale(0);
        transform: scale(0);
          -webkit-transform-origin: left center;
        transform-origin: left center;
          transition: -webkit-transform;
        transition: transform;

        @apply --paper-tabs-selection-bar;
      }

      #selectionBar.align-bottom {
        top: 0;
        bottom: auto;
      }

      #selectionBar.expand {
        transition-duration: 0.15s;
        transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
      }

      #selectionBar.contract {
        transition-duration: 0.18s;
        transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
      }

      #tabsContent > ::slotted(:not(#selectionBar)) {
        height: 100%;
      }
    </style>

    <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>

    <div id="tabsContainer" on-track="_scroll" on-down="_down">
      <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]">
        <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" on-transitionend="_onBarTransitionEnd"></div>
        <slot></slot>
      </div>
    </div>

    <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>

  </template>

  
</dom-module>















<dom-module id="tf-inference-panel">
  <template>
    <style id="linter-paper-button-style">
      /**
       * This style preserves the styling previous to
       * https://github.com/PolymerElements/paper-button/pull/115
       * This change can break the layout of paper-button content.
       * Remove this style to apply the change.
       */
      paper-button {
        display: inline-block;
        text-align: center;
        font-family: inherit;
      }
    </style>
    <style>
      :host {
        display: block;
        font-size: 14px;
      }
      tf-option-selector .model-type-button {
        width: auto;
      }
      .flex-holder {
        display: flex;
      }
      .title {
        font-size: 32px;
        margin-bottom: 20px;
      }
      .help-icon {
        width: 15px;
        height: 15px;
        padding: 0;
        color: #757575;
      }
      .tooltip {
        width: 500px;
      }
      .input-in-row {
        margin-right: 10px;
      }
      .flex-grow {
        flex-grow: 1;
      }
      .model-type-label {
        padding-top: 10px;
      }
      .add-model-button-holder {
        display: flex;
      }
      .checkbox {
        margin-top: 30px;
        margin-left: 10px;
      }
      .predict-checkbox {
        margin-top: 43px;
        margin-left: 10px;
      }
      paper-input {
        --paper-input-container-focus-color: #f57c00;
      }
      paper-radio-button {
        --paper-radio-button-unchecked-color: #3c4043;
        --paper-radio-button-unchecked-ink-color: #3c4043;
        --paper-radio-button-checked-color: #3c4043;
        --paper-radio-button-checked-ink-color: #3c4043;
      }
    </style>
    <div class="title">Set up your data and model</div>
    <paper-input always-float-label label="Inference address" placeholder="[[inferenceAddress1]]" value="{{inferenceAddress1}}">
    </paper-input>
    <div class="flex-holder">
      <paper-input always-float-label label="Model name" placeholder="[[modelName1]]" value="{{modelName1}}" class="input-in-row">
      </paper-input>
      <paper-input always-float-label label="Model version (optional)" placeholder="[[modelVersion1]]" value="{{modelVersion1}}" class="input-in-row">
      </paper-input>
      <paper-input always-float-label label="Model signature (optional)" placeholder="[[modelSignature1]]" value="{{modelSignature1}}" class="input-in-row">
      </paper-input>
    </div>
    <div hidden$="{{hideModelPane2}}">
      <paper-input always-float-label label="Inference address" placeholder="[[inferenceAddress2]]" value="{{inferenceAddress2}}">
      </paper-input>
      <div class="flex-holder">
        <paper-input always-float-label label="Model name" placeholder="[[modelName2]]" value="{{modelName2}}" class="input-in-row">
        </paper-input>
        <paper-input always-float-label label="Model version (optional)" placeholder="[[modelVersion2]]" value="{{modelVersion2}}" class="input-in-row">
        </paper-input>
        <paper-input always-float-label label="Model signature (optional)" placeholder="[[modelSignature2]]" value="{{modelSignature2}}" class="input-in-row">
        </paper-input>
      </div>
    </div>
    <div class="add-model-button-holder" hidden$="{{!hideModelPane2}}">
      <paper-button on-tap="addModelClicked_" class="main-button">
        Add another model for comparison
      </paper-button>
    </div>
    <div class="flex-holder">
      <div>
        <div class="model-type-label">Model Type</div>
        <paper-radio-group selected="{{modelType}}">
          <paper-radio-button name="classification">Classification</paper-radio-button>
          <paper-radio-button name="regression">Regression</paper-radio-button>
        </paper-radio-group>
      </div>
      <paper-checkbox checked="{{usePredictApi}}" class="predict-checkbox">
        Uses Predict API
      </paper-checkbox>
    </div>
    <div class="flex-holder">
      <paper-input always-float-label label="Input tensor name" placeholder="[[predictInputTensor]]" value="{{predictInputTensor}}" class="input-in-row" hidden$="[[shouldDisablePredictTensorControls_(usePredictApi)]]">
      </paper-input>
      <paper-input always-float-label label="Output tensor name" placeholder="[[predictOutputTensor]]" value="{{predictOutputTensor}}" class="input-in-row" hidden$="[[shouldDisablePredictTensorControls_(usePredictApi)]]">
      </paper-input>
    </div>
    <div class="flex-holder">
      <paper-input always-float-label label="Path to examples" value="{{examplesPath}}" class="flex-grow">
      </paper-input>
      <paper-checkbox checked="{{sequenceExamples}}" class="checkbox">
        SequenceExamples
      </paper-checkbox>
    </div>
    <div class="flex-holder">
      <paper-input always-float-label type="number" class="input-in-row flex-grow" label="Maximum number of examples to load" placeholder="[[maxExamples]]" value="{{maxExamples}}">
      </paper-input>
      <paper-input always-float-label type="number" class="input-in-row flex-grow" label="Sampling ratio (0.2 = sample ~20% of examples)" placeholder="[[samplingOdds]]" value="{{samplingOdds}}">
      </paper-input>
    </div>
    <paper-input always-float-label label="Path to label dictionary (optional)" placeholder="[[labelVocabPath]]" value="{{labelVocabPath}}" disabled="[[shouldDisableClassificationControls_(modelType)]]">
    </paper-input>
    <div class="flex-holder">
      <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
      <div>Maps predicted class indices to labels from text file</div>
      <paper-tooltip class="tooltip" animation-delay="0" position="bottom" offset="0">
        An optional text file for use with the results of a classification
        model. Classification models return predicted classes as indices. If a
        vocab file is provided, each predicted class index will be mapped to a
        label from this file for use in the display. Each line in the file
        corresponds to a label, with the first line corresponding to class index
        0.
      </paper-tooltip>
    </div>
    <div class="flex-holder">
      <paper-input always-float-label type="number" label="Max classes to display" placeholder="[[maxClassesToDisplay]]" value="{{maxClassesToDisplay}}" class="input-in-row" disabled="[[shouldDisableMultiClassControls_(multiClass)]]">
      </paper-input>
      <paper-checkbox disabled="[[shouldDisableClassificationControls_(modelType)]]" checked="{{multiClass}}" class="checkbox">
        Multi-class classification model
      </paper-checkbox>
    </div>
  </template>

  
</dom-module>










<dom-module id="vz-bar-chart">
  <template>
    <div id="tooltip">
      <table>
        <thead>
          <tr id="tooltip-table-header-row"></tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div id="chartdiv"></div>
    <style include="plottable-style"></style>
    <style>
      :host {
        -webkit-user-select: none;
        -moz-user-select: none;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        position: relative;
        outline: none;
      }
      div {
        -webkit-user-select: none;
        -moz-user-select: none;
        flex-grow: 1;
        flex-shrink: 1;
      }
      td {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 13px;
        opacity: 1;
      }
      #tooltip {
        pointer-events: none;
        position: absolute;
        opacity: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        font-size: 14px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 4px;
        line-height: 1.4em;
        padding: 8px;
        z-index: 5;
        cursor: none;
        margin-top: 10px;
      }
      .swatch {
        border-radius: 50%;
        width: 14px;
        height: 14px;
        display: block;
        border: 2px solid rgba(0, 0, 0, 0);
      }
      .closest .swatch {
        border: 2px solid white;
      }
      th {
        padding-left: 5px;
        padding-right: 5px;
        text-align: left;
      }
    </style>
  </template>
  
</dom-module>





<dom-module id="tf-confusion-matrix">
  <template>
    <style>
      table {
        display: inline-block;
      }
      td {
        text-align: right;
      }
      th,
      td {
        font-size: 14px;
        padding: 3px;
        font-weight: normal;
      }
      .flex {
        display: flex;
        flex-direction: row-reverse;
      }
      .pred-label {
        text-align: left;
        font-size: 10px;
      }
      .total-label {
        color: #5f6368;
        font-size: 10px;
        text-align: left;
      }
      .total-cell {
        color: #5f6368;
      }
      .actual-label {
        text-align: right;
        font-size: 10px;
      }
      .n-label {
        font-size: 10px;
        vertical-align: bottom;
      }
      .value-cell {
        color: #202124;
        border: 1px solid lightgrey;
      }
      .parenthetical {
        padding-right: 5px;
        width: 50px;
      }
    </style>
    <div id="holder"></div>
  </template>

  
</dom-module>





<dom-module id="tf-inference-viewer">
  <template>
    <style>
      :host {
        display: block;
      }
      .runs-holder {
        padding: 0;
        display: flex;
        flex-direction: column-reverse;
        overflow-y: auto;
        max-height: 200px;
      }
      .row {
        display: flex;
        color: #3c4043;
        font-size: 12px;
      }
      .header {
        color: #80868b;
        font-size: 12px;
        padding: 4px 0;
        border-bottom: solid 1px #dadce0;
        border-top: solid 1px #dadce0;
      }
      .dark-row-one {
        background: #cbf0f8;
      }
      .dark-row-two {
        background: #fff3e0;
      }
      .white-row {
        background: white;
      }
      .marker {
        flex: 0.5;
        margin-right: 5px;
      }
      .marker.mark-one {
        background: #007b83;
        padding-left: 1px;
      }
      .marker.mark-two {
        background: #ff9800;
        padding-left: 1px;
      }
      .run {
        flex: 10;
      }
      .multi-model {
        flex: 10;
      }
      .one-model {
        display: none;
      }
      .show-label {
        flex: 20;
        display: flex;
        overflow: hidden;
      }
      .no-label {
        display: none;
      }
      .score {
        flex: 10;
      }
      .arrow {
        flex: 2;
      }
      .delta {
        flex: 10;
      }
      .text {
        margin-top: 4px;
      }
      .green {
        color: green;
      }
      .red {
        color: red;
      }
    </style>
    <div class="row header">
      <div class="marker"></div>
      <div class="run">Run</div>
      <div class$="[[getModelHeaderClass(inferences)]]">Model</div>
      <div class$="[[getLabelHeaderClass(modelType)]]">Label</div>
      <div class="score">[[getScoreLabel(modelType)]]</div>
      <div class="arrow"></div>
      <div class="delta">Delta</div>
    </div>
    <div class="runs-holder">
      <template is="dom-repeat" items="[[inferences]]" as="modelsInference" index-as="runindex">
        <div class="rows-for-run">
          <template is="dom-repeat" items="[[modelsInference]]" as="inference" index-as="modelindex">
            <template is="dom-repeat" items="[[getInferenceList(inference, maxEntriesPerRun)]]">
              <div class$="[[getRowClass(runindex, inferences, modelindex)]]">
                <div class$="[[getMarkerClass(runindex, inferences, modelindex)]]"></div>
                <div class="run text">[[getRunNumber(runindex)]]</div>
                <div class$="[[getModelClass(inferences)]]">
                  <div>[[getModelName(modelNames, modelindex)]]</div>
                </div>
                <div class$="[[getLabelClass(modelType)]]">
                  <div>[[getLabel(item)]]</div>
                </div>
                <div class="score text">[[getPrintableScore(item.score)]]</div>
                <div class="arrow">
                  <iron-icon icon="[[getIcon(runindex, index, modelindex)]]" class$="[[getIconClass(runindex, index, modelindex)]]">
                  </iron-icon>
                </div>
                <div class="delta text">
                  [[getPrintableDelta(runindex, index, modelindex)]]
                </div>
              </div>
            </template>
          </template>
        </div>
      </template>
    </div>
  </template>

  
</dom-module>























































<dom-module id="facets-dive-vis">
  <template>
    <style>
      :host {
        box-sizing: border-box;
        display: block;
        height: 100%;
        width: 100%;
      }
      .labels {
        @apply --paper-font-common-base;
        @apply --paper-font-headline;
      }
      .rotate {
        stroke-dasharray: 1.5, 0.5;
        animation: rotate 1s linear infinite;
      }
      @keyframes rotate {
        from {
          stroke-dashoffset: 0;
        }
        to {
          stroke-dashoffset: 2;
        }
      }
    </style>
    <div id="holder">
      
    </div>
  </template>
</dom-module>




<dom-module id="facets-dive-controls">
  <template>
    <style>
      :host {
        @apply --paper-font-common-base;
        display: flex;
        overflow: visible;
      }

      .main-controls {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 60px;
        display: flex;
        height: 100%;
        overflow: visible;
      }

      .overflow-holder {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        right: 0;
        overflow: visible;
      }

      #overflowmenu {
        margin: 0 40px;
      }

      .overflow-div {
        display: flex;
        flex-direction: column;
      }

      .overflow-checkbox {
        margin: 8px 0;
        padding
      }

      .dropdown-holder {
        display: flex;
        width: 150px;
        margin: 0 10px;
      }

      .dropdown-trigger {
        margin-top: 10px;
      }

      .expand-button {
        color: #9b9b9b;
        --paper-icon-button-ink-color: #9b9b9b;
      }
      paper-menu paper-checkbox {
        display: block;
        font-weight: normal;
        font-size: 12.5px;
        text-align: center;
      }

      paper-item {
        padding: 0 14px;
        --paper-item-min-height: 36px;
      }
      paper-dropdown-menu paper-item {
        border-bottom: 1px solid #ccc;
      }

      #verticalFacet {
        --paper-input-container-input: {
          color: var(--grid-faceting-vertical-label-color);
        };
      }
      #horizontalFacet {
        --paper-input-container-input: {
          color: var(--grid-faceting-horizontal-label-color);
        };
      }
      #verticalPosition {
        --paper-input-container-input: {
          color: var(--item-positioning-vertical-label-color);
        };
      }
      #horizontalPosition {
        --paper-input-container-input: {
          color: var(--item-positioning-horizontal-label-color);
        };
      }
      .vertical-facet {
        color: var(--grid-faceting-vertical-label-color);
      }
      .horizontal-facet {
        color: var(--grid-faceting-horizontal-label-color);
      }
      .vertical-position {
        color: var(--item-positioning-vertical-label-color);
      }
      .horizontal-position {
        color: var(--item-positioning-horizontal-label-color);
      }
    </style>

    <div class="main-controls">
        <div class="dropdown-holder horizontal-facet">
            <paper-dropdown-menu id="horizontalFacet" label="Binning | X-Axis" class="facet-selector">
              <paper-listbox class="dropdown-content" selected="{{horizontalFacet}}" attr-for-selected="value" slot="dropdown-content">
                <paper-item value="">(none)</paper-item>
                <template is="dom-repeat" items="[[keys]]">
                  <paper-item value="[[item]]">[[_breakUpAndTruncate(item)]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>

          <template is="dom-if" if="[[horizontalFacet]]">
          <paper-input type="number" min="1" max="[[_maxBuckets(horizontalFacet, horizontalBagOfWords)]]" value="{{horizontalBuckets}}" label="Count">
            </paper-input>
          </template>

      <div class="dropdown-holder vertical-facet">
        <paper-dropdown-menu id="verticalFacet" label="Binning | Y-Axis" class="facet-selector">
          <paper-listbox class="dropdown-content" selected="{{verticalFacet}}" attr-for-selected="value" slot="dropdown-content">
            <paper-item value="">(none)</paper-item>
            <template is="dom-repeat" items="[[keys]]">
              <paper-item value="[[item]]">[[_breakUpAndTruncate(item)]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>

      <template is="dom-if" if="[[verticalFacet]]">
        <paper-input type="number" min="1" max="[[_maxBuckets(verticalFacet,verticalBagOfWords)]]" value="{{verticalBuckets}}" label="Count">
        </paper-input>
      </template>

      <div class="dropdown-holder">
        <paper-dropdown-menu id="colorBy" label="Color By">
          <paper-listbox class="dropdown-content" selected="{{colorBy}}" attr-for-selected="value" slot="dropdown-content">
            <paper-item value="">(none)</paper-item>
            <template is="dom-repeat" items="[[keys]]">
              <paper-item value="[[item]]">[[item]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>

      <div class="dropdown-holder">
        <paper-dropdown-menu id="imageFieldName" label="Label By">
          <paper-listbox class="dropdown-content" selected="{{imageFieldName}}" attr-for-selected="value" slot="dropdown-content">
            <paper-item value="">
              [[_getImageFieldNameDefaultLabel(atlasUrl)]]
            </paper-item>
            <template is="dom-repeat" items="[[keys]]">
              <paper-item value="[[item]]">[[item]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>

      <div class="dropdown-holder horizontal-position">
        <paper-dropdown-menu id="horizontalPosition" label="Scatter | X-Axis" class="position-selector">
          <paper-listbox class="dropdown-content" selected="{{horizontalPosition}}" attr-for-selected="value" slot="dropdown-content">
            <paper-item value="">(default)</paper-item>
            <template is="dom-repeat" items="[[keys]]" filter="_isKeyNumeric">
              <paper-item value="[[item]]">[[item]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>

      <div class="dropdown-holder vertical-position">
        <paper-dropdown-menu id="verticalPosition" label="Scatter | Y-Axis" class="position-selector">
          <paper-listbox class="dropdown-content" selected="{{verticalPosition}}" attr-for-selected="value" slot="dropdown-content">
            <paper-item value="">(default)</paper-item>
            <template is="dom-repeat" items="[[keys]]" filter="_isKeyNumeric">
              <paper-item value="[[item]]">[[item]]</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>
      </div>
    </div>
    <div class="overflow-holder">
      <template is="dom-if" if="[[_shouldShowOverflowMenu(colorBy, verticalFacet, horizontalFacet)]]">
        <paper-icon-button class="dropdown-trigger" icon="more-vert" alt="more-vert" id="overflowbtn" on-click="_openOverflow">
        </paper-icon-button>
      </template>
      <paper-dialog id="overflowmenu" no-overlap horizontal-align="right" vertical-align="top">
        <div class="overflow-div">
          <template is="dom-if" if="{{_isKeyCategorical(colorBy)}}">
            <div class="dropdown-holder">
              <paper-dropdown-menu id="paletteChoice" label="Display | Color Palette">
                <paper-listbox class="dropdown-content" selected="{{paletteChoice}}" attr-for-selected="value" slot="dropdown-content">
                  <paper-item value="standard">standard</paper-item>
                  <paper-item value="warm">warm</paper-item>
                  <paper-item value="cool">cool</paper-item>
                  <paper-item value="assist">assist</paper-item>
                </paper-listbox>
              </paper-dropdown-menu>
            </div>
          </template>
          <template is="dom-if" if="[[_hasWordTree(verticalFacet)]]">
            <paper-checkbox class="overflow-checkbox" checked="{{verticalBagOfWords}}">
              X-Axis Bag of words
            </paper-checkbox>
          </template>

          <template is="dom-if" if="[[_hasWordTree(horizontalFacet)]]">
            <paper-checkbox class="overflow-checkbox" checked="{{horizontalBagOfWords}}">
              Y-Axis Bag of words
            </paper-checkbox>
          </template>
        </div>
      </paper-dialog>
    </div>
  </template>
</dom-module>









<dom-module id="facets-dive-info-card">
  <template>
    <style>
      :host {
        @apply --paper-font-common-base;
        box-sizing: border-box;
        max-height: 100%;
        max-width: 100%;
        overflow: auto;
        padding: 8px;
      }
      dt {
        color: #9e7c65;
        font-size: 14px;
      }
      dd {
        @apply --paper-font-common-code;
        color: #513726;
        margin: 0 0 16px 0;
      }
    </style>
    <div id="holder"></div>
    
  </template>
</dom-module>












<dom-module id="facets-dive-legend">
  <template>
    <style>
      :host {
        @apply --paper-font-common-base;
      }

      .legend {
        border: 1px solid #a9a9a9;
        min-width: 200px;
      }

      .topbar {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        background: #E6E6FA;
      }

      .expand-button {
        padding: 0;
        width: 20px;
        height: 20px;
        margin-left: 10px;
      }

      .legend-body {
        border-top: 1px solid #a9a9a9;
        padding: 8px;
        background: white;
      }

      .legend .layout-row {
        margin: 0;
      }
      .legend .layout-row span {
        margin: 2px 0 0 8px;
      }

      /**
       * Legend table shim. Polymer's dom-repeat feature has a known issue in
       * which it doesn't work with <tr> elements inside of a <table>. So
       * instead, we use CSS with classed divs to achieve table behavior.
       */
      .legend-table {
        display: table;
        margin-left: 2px;
      }
      .legend-row {
        display: table-row;
      }
      .legend-cell {
        display: table-cell;
      }

      /**
       * Color legend.
       */
      .legend .color {
        font-size: 14px;
      }
      .legend .color iron-icon {
        --iron-icon-width: 16px;
        --iron-icon-height: 16px;
        margin: 0 2px;
      }
      .legend .color iron-icon[fill="#ffffff"] {
        background: #dddddd;
      }
      .legend .color span {
        margin: 0;
      }
      .legend .special {
        font-style: italic;
      }

      .legend h2 {
        @apply --paper-font-subhead;
        color: #4f423e;
        font-weight: bold;
        line-height: 1;
        margin: 0;
      }
      .legend .color-by-field {
        color: #968e8c;
        display: block;
        font-size: 12.5px;
        font-weight: normal;
        margin: 2px 0 4px 20px;
      }
    </style>
    <template is="dom-if" if="[[_anyColor(colorBy, palette)]]">
      <div class="legend">
        <div class="topbar">
          <div class="title">Legend</div>
          <paper-icon-button class="expand-button" on-click="_toggleOpened" icon="[[_getIcon(_opened)]]">
          </paper-icon-button>
        </div>
        <iron-collapse id="collapse" opened="{{_opened}}">
          <div class="legend-body">
            <h2>Colors</h2>
            <span class="color-by-field">
              by [[_breakUpAndTruncate(colorBy)]]
              <paper-tooltip position="top">[[colorBy]]</paper-tooltip>
            </span>

            <div class="legend-table">
              <template is="dom-repeat" items="[[palette]]">
                <div class="legend-row color">
                  <div class="legend-cell">
                    <iron-icon icon="av:fiber-manual-record" fill$="[[item.color]]" style$="fill:[[item.color]]"></iron-icon>
                  </div>
                  <div class="legend-cell">
                    <span class$="[[_specialClass(item.content.special)]]">
                      [[_breakUpAndTruncate(item.content.label)]]
                    </span>
                    <paper-tooltip position="top">[[item.content.label]]</paper-tooltip>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </iron-collapse>
      </div>
    </template>
  </template>
</dom-module>




<dom-module id="facets-dive">
  <template>

    <style>
      /**
       * paper-input-container uses an element containing only &nbsp; for
       * spacing purposes. Aggressive vulcanizers sometimes remove this content.
       * This CSS rule forces the containing element to have the correct height
       * in either case.
       */
      :host paper-input-container > .floated-label-placeholder {
        min-height: 20px;
      }

      :host {
        background: #ffffff;
        box-sizing: border-box;
        display: flex;
        flex-grow: 1;
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
      }
      .fill {
        display: flex;
        flex-grow: 1;
        position: relative;
      }
      .main {
        flex-direction: column;
      }
      facets-dive-controls {
        border-bottom: 1px solid #d3d3d3;
        flex-grow: 0;
        flex-shrink: 0;
        height: 60px;
      }
      .row {
        display: flex;
        flex-direction: row;
      }
      facets-dive-legend {
        position: absolute;
        bottom: 14px;
        right: 24px;
      }
      .zoom-controls {
        bottom: 14px;
        box-sizing: border-box;
        left: 0;
        position: absolute;
      }
      .zoom-controls paper-button {
        background-color: #e7e7e7;
        clear: left;
        color: #2b2b2b;
        display: block;
        float: left;
        margin: 4px 8px;
        min-width: 0;
        padding: 8px;
      }
      facets-dive-info-card {
        background: #fff8f4;
        border-left: 1px solid #c6c6c6;
        box-sizing: border-box;
        flex-grow: 0;
        flex-shrink: 0;
        width: 240px;
      }
    </style>

    <div class="fill main">
      <facets-dive-controls id="controls" atlas-url="[[atlasUrl]]" keys="[[_keys]]" stats="[[stats]]" vertical-facet="{{verticalFacet}}" vertical-buckets="{{verticalBuckets}}" vertical-bag-of-words="{{verticalBagOfWords}}" horizontal-facet="{{horizontalFacet}}" horizontal-buckets="{{horizontalBuckets}}" horizontal-bag-of-words="{{horizontalBagOfWords}}" position-mode="{{positionMode}}" vertical-position="{{verticalPosition}}" horizontal-position="{{horizontalPosition}}" color-by="{{colorBy}}" image-field-name="{{imageFieldName}}" palette="[[_palette]]" palette-choice="{{paletteChoice}}" grid-faceting-vertical-label-color="[[gridFacetingVerticalLabelColor]]" grid-faceting-horizontal-label-color="[[gridFacetingHorizontalLabelColor]]" item-positioning-vertical-label-color="[[itemPositioningVerticalLabelColor]]" item-positioning-horizontal-label-color="[[itemPositioningHorizontalLabelColor]]"></facets-dive-controls>

      <div class="fill row">
        <div class="fill">
          <facets-dive-vis id="vis" class="fill" data="[[data]]" filtered-data-indices="[[filteredDataIndices]]" atlas-url="[[atlasUrl]]" sprite-url="[[spriteUrl]]" cross-origin="[[crossOrigin]]" keys="{{_keys}}" stats="{{stats}}" sprite-image-width="[[spriteImageWidth]]" sprite-image-height="[[spriteImageHeight]]" vertical-facet="[[verticalFacet]]" vertical-buckets="[[verticalBuckets]]" vertical-bag-of-words="[[verticalBagOfWords]]" horizontal-facet="[[horizontalFacet]]" horizontal-buckets="[[horizontalBuckets]]" horizontal-bag-of-words="[[horizontalBagOfWords]]" position-mode="[[positionMode]]" vertical-position="[[verticalPosition]]" horizontal-position="[[horizontalPosition]]" color-by="{{colorBy}}" image-field-name="{{imageFieldName}}" palette="{{_palette}}" palette-choice="[[paletteChoice]]" grid-faceting-vertical-label-color="{{gridFacetingVerticalLabelColor}}" grid-faceting-horizontal-label-color="{{gridFacetingHorizontalLabelColor}}" item-positioning-vertical-label-color="{{itemPositioningVerticalLabelColor}}" item-positioning-horizontal-label-color="{{itemPositioningHorizontalLabelColor}}" fit-grid-aspect-ratio-to-viewport="[[fitGridAspectRatioToViewport]]" selected-data="{{selectedData}}" selected-indices="{{selectedIndices}}" compared-data="{{comparedData}}" compared-indices="{{comparedIndices}}" stable-colors="[[stableColors]]"></facets-dive-vis>

          <div class="zoom-controls">
            <paper-button raised id="zoomInButton">
              <iron-icon icon="icons:add"></iron-icon>
            </paper-button>
            <paper-button raised id="zoomOutButton">
              <iron-icon icon="icons:remove"></iron-icon>
            </paper-button>
            <paper-button raised id="fitButton">
              <iron-icon icon="icons:aspect-ratio"></iron-icon>
            </paper-button>
          </div>

          <facets-dive-legend id="legend" color-by="[[colorBy]]" palette="[[_palette]]">
          </facets-dive-legend>
        </div>

        <template is="dom-if" if="[[!hideInfoCard]]">
          <facets-dive-info-card id="infoCard" selected-data="[[selectedData]]" info-renderer="[[infoRenderer]]">
          </facets-dive-info-card>
        </template>
      </div>
    </div>

  </template>
</dom-module>

























<dom-module id="facets-overview-row-stats">
  <template>
    <style>
      * {
        text-align: right;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
      }
      .data-error {
        color: red;
        font-weight: bold;
      }
      .data-weighted {
        font-style: italic;
      }
      .table-row {
        display: flex;
        margin-bottom: 4px;
      }
      .table-cell {
        min-width: 70px;
        max-width: 70px;
        padding-right: 4px;
        overflow: hidden;
      }
      .data-custom {
        min-width: 150px;
        max-width: 150px;
        white-space: pre;;
      }
      #legend-box {
        width: 6px;
        height: 16px;
        margin-left: 4px;
      }
    </style>
    <div class="table-row">
      <div id="legend-box"></div>
      <template is="dom-repeat" items="[[_entries]]">
        <div class$="[[item.cssClass]] table-cell" title="[[item.fullStr]]">[[item.str]]</div>
      </template>
    </div>
  </template>
</dom-module>





<dom-module id="facets-overview-row-legend">
  <template>
    <style>
      .table-row {
        display: flex;
        background: rgba(61,140,207,0.1);
        border-left: solid 0.5px rgba(0,0,0,0.1);
        border-bottom: solid 0.5px rgba(0,0,0,0.1);
      }
      .table-cell {
        padding: 20px 4px 8px 0;
        min-width: 69px;
        max-width: 69px;
        text-align: right;
        font-size: 14px;
        font-weight: 300;
        border-right: solid 0.5px rgba(0,0,0,0.1);
      }
      .data-weighted {
        font-style: italic;
      }
      .data-custom {
        min-width: 150px;
        max-width: 150px;
      }
      .legend-space {
        width: 6px;
        height: 8px;
        margin-left: 4px;
      }
    </style>
    <div class="table-row">
      <div class="legend-space"></div>
      <template is="dom-repeat" items="[[_entries]]">
        <div class$="[[item.cssClass]] table-cell">[[item.str]]</div>
      </template>
    </div>
  </template>
</dom-module>









<dom-module id="facets-overview-chart">
  <template>
    <style include="plottable-style"></style>
    <style>
      .plottable.chart-small {
        height: 46px;
        width: 250px;
      }
      .plottable.xaxis-small{
        height: 30px;
        width: 250px;
      }
      .plottable.chart-big {
        height: 200px;
        width: 550px;
      }
      .plottable.xaxis-big {
        height: 50px;
        width: 550px;
      }
      #show_table_button {
        margin: 0 0 0 5px;
        padding: 0 3px;
        font-size: 7pt;
        background-color: #d3d3d3;
      }
      .dialog-row-entry {
        padding: 0 10px 0 0;
      }
      .table-header {
        border-bottom: 1px solid black;
      }
      .dialog-row, .dialog-header-row {
        display: flex;
      }
      .dialog-row.selected {
        border: 1px solid black
      }
      .dialog-row:hover {
        background-color: #D0D0D0;
        cursor: pointer;
      }
      .dialog-table {
        clear: left;
      }
      .label-cell {
        width: 90px;
        max-width: 90px;
        min-width: 90px;
        overflow-wrap: break-word;
      }
      .non-overflow-label-cell {
        width: 90px;
        max-width: 90px;
        min-width: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .count-cell {
        width: 100px;
        max-width: 100px;
        min-width: 100px;
        overflow-wrap: break-word;
      }
      .weighted-cell {
        font-style: italic;
      }
      .data-list-small {
        height: 60px;
      }
      .data-list-big {
        height: 180px;
        width: 550px;
      }
      .hidechart {
        display: none;
      }
      .showchart {
        display: inline;
      }
      #tooltip {
        background-color: var(--paper-tooltip-background, #616161);
        opacity: 0;
        color: white;
        pointer-events:none;
        transition: opacity 0.3s;
        position: absolute;
        text-align:center;
        padding: 6px;
        border-radius: 2px;
        font-size: 12px;
        line-height: 1;
        margin-left: 50px;
        white-space: pre;
        top: 0px;
      }
      .toplevel {
        position: relative;
        text-align: left;
        padding-top: 4px;
      }
    </style>
    <div class="toplevel">
      <template is="dom-if" if="[[_isStringChart(_chartType, chartSelection)]]">
        <paper-button id="show_table_button" on-click="_toggleShowTable">[[_getShowTableButtonText(_showTable)]]</paper-button>
      </template>
      <div class$="[[_chartClass]]">
        <div id="chart" class$="[[_chartSvgClass]]"></div>
        <div id="xaxis" class$="[[_xAxisSvgClass]]"></div>
      </div>
      <template is="dom-if" if="[[_showTable]]">
        <div class="dialog-table">
          <div class="dialog-header-row">
            <div class="dialog-row-entry table-header label-cell">Value</div>
            <template is="dom-repeat" items="[[data]]" as="data">
              <div class="dialog-row-entry table-header">
                <div class="non-overflow-label-cell">[[data.name]]</div>
              </div>
            </template>
          </div>
          <iron-list items="[[_tableData]]" as="entry" class$="[[_tableDataClass]]">
            <template>
              <div class$="[[_getEntryRowClass(entry, selection)]]" on-tap="_rowClick" data-value="[[_getEntryRowValue(entry)]]">
                <div class="dialog-row-entry label-cell">[[entry.value]]</div>
                <template is="dom-repeat" items="[[entry.counts]]" as="count">
                  <div class$="[[_getCountCellClass(showWeighted)]]">[[count]]</div>
                </template>
              </div>
            </template>
          <iron-list>
        </iron-list></iron-list></div>
      </template>
      <div id="tooltip"></div>
    </div>
  </template>
</dom-module>



<dom-module id="facets-overview-table">
  <template>
    <style>
      [hidden] {
        display: none !important;
      }
      .feature-name {
        font-weight: 500;
        max-width: 480px;
        word-wrap: break-word;
        margin: 0 0 4px 4px;
      }
      .table-name {
        font-weight: 500;
        word-wrap:break-word;
        padding: 4px 0 4px 8px;
        background: rgba(61,140,207,0.3);
        border: solid 0.5px rgba(0,0,0,0.1);
      }
      .feature-iron-list {
        overflow-x: hidden !important;
        height: 800px;
      }
      .chart-column {
        width: 280px;
        min-width: 280px;
        text-align: center;
      }
      .chart-column.header-cell {
        background: rgba(61,140,207,0.1);
        border-top: solid 0.5px rgba(0,0,0,0.1);
        border-bottom: solid 0.5px rgba(0,0,0,0.1);
        border-right: solid 0.5px rgba(0,0,0,0.1);
        padding-left: 8px;
      }
      .numeric-row {
        min-height: 80px;
        display: table-row;
      }
      .categorical-row {
        min-height: 98px;
        display: table-row;
      }
      .table-cell {
        display: table-cell;
        vertical-align: top;
        font-size: 14px;
        line-height: 1.2em;
      }
      .chart-column.table-cell {
        display: table-cell;
        vertical-align: top;
        padding: 10px 0 0 20px
        margin-right: 10px;
      }
      .header-cell {
        position: relative;
        min-height: 60px;
      }
      paper-checkbox {
        --paper-checkbox-size: 12px;
        --paper-checkbox-label-spacing: 2px;
      }
      .control-holder {
        position: absolute;
        bottom: 0;
        width: 100%;
      }
      .checkbox-holder {
        display: flex;
        padding-bottom: 2px;
      }
      .chart-checkbox {
        padding-right: 8px;
        font-size: 12px;
      }
      #weightbox {
        font-style: italic;
      }
      paper-dropdown-menu {
        display: block;
        width: 150px;
        --paper-input-container-label --paper-input-container-input: {
          font-size: 14px;
        }
      }
      .hidden {
        display: none;
      }
    </style>
    <div class$="[[_getTableWrapperClass(features)]]">
      <div class="header-row">
        <div class="header-cell table-cell">
          <div class="table-name">[[_getTitle(numeric)]] Features ([[_getFeatureCountText(dataModel, numeric, features)]])
          </div>
          <facets-overview-row-legend numeric="[[numeric]]" show-weighted="[[_showWeighted]]" has-custom="[[_hasCustomStats(dataModel)]]" data-model="[[dataModel]]">
          </facets-overview-row-legend>
        </div>
        <div class="table-cell chart-column header-cell">
          <div class="control-holder">
            <paper-dropdown-menu label="Chart to show">
              <paper-listbox class="dropdown-content" selected="{{_chartSelection}}" attr-for-selected="value" slot="dropdown-content">
                <template is="dom-repeat" items="[[_chartSelectionTypes]]">
                  <paper-item value="[[item]]">[[item]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
            <div class="checkbox-holder">
              <paper-checkbox class="chart-checkbox" id="logbox" checked="{{_logScale}}">log</paper-checkbox>
              <paper-checkbox class="chart-checkbox" id="expandbox" checked="{{_expandCharts}}">expand</paper-checkbox>
              <template is="dom-if" if="[[_hasWeightedHistogram(features)]]">
                <paper-checkbox class="chart-checkbox" id="weightbox" checked="{{_showWeighted}}">weighted</paper-checkbox>
              </template>
              <template is="dom-if" if="[[_hasMultipleDatasets(dataModel)]]">
                <paper-checkbox class="chart-checkbox" id="percentbox" checked="{{_showPercentage}}" disabled="[[_chartSelectionHasQuantiles(_chartSelection)]]">percentages</paper-checkbox>
              </template>
            </div>
          </div>
        </div>
      </div>
      <iron-list items="[[features]]" as="feature" class="feature-iron-list">
        <template>
          <div class$="[[_getTableRowClass(numeric)]]">
            <div class="table-cell">
              <div class="feature-name">[[_getFeatureName(feature)]]</div>
              <template is="dom-repeat" items="[[_getDatasets(dataModel)]]" as="dataset" index-as="datasetIndex">
                <div>
                  <facets-overview-row-stats stats="[[_getStats(dataModel, dataset, feature)]]" custom-stats="[[_getAllCustomStats(dataModel, feature)]]" show-weighted="[[_showWeighted]]" has-custom="[[_hasCustomStats(dataModel)]]" data-model="[[dataModel]]" dataset-index="[[datasetIndex]]" compare-mode="[[compareMode]]">
                  </facets-overview-row-stats>
                </div>
              </template>
            </div>
            <div class$="[[_getChartClass(_expandCharts)]]">
              <facets-overview-chart data="[[_getChartData(dataModel, feature)]]" data-model="[[dataModel]]" feature="[[_getFeatureName(feature)]]" selection="{{featureSliceSelection}}" log-scale="[[_logScale]]" show-weighted="[[_showWeighted]]" show-percentage="[[_showPercentage]]" chart-selection="[[_chartSelection]]" expand-chart="[[_expandCharts]]">
              </facets-overview-chart>
            </div>
          </div>
        </template>
      </iron-list>
    </div>
  </template>
</dom-module>












<dom-module id="facets-overview">
  <template>
    <style>
      :host {
        @apply --paper-font-common-base
        font-size: 10pt;
      }
      .controls {
        background: rgba(234,234,234,0.2);
        border-bottom: solid 0.5px rgba(0,0,0,0.2);
        display: flex;
        height: 60px;
        padding-left: 20px;

      }
      .feature-checkboxes {
        background: rgba(234,234,234,0.2);
        border-bottom: solid 0.5px rgba(0,0,0,0.2);
        display: flex;
        flex-wrap: wrap;
        padding:  8px 0 8px 20px;
      }
      .feature-checkbox {
        display: flex;
        padding: 0 0 0 16px;
      }
      paper-checkbox {
        font-size: 14px;
      }
      .input-control {
        --paper-input-container-label --paper-input-container-input: {
          font-size: 14px;
        };
      }
      .features-text {
        line-height: 1;
        padding: 1px 0 0 0;
        font-size: 14px;
      }
      .left-dropdown {
        padding: 0 10px 0 0;
      }
      .middle-checkbox {
        margin-top: 30px;
        padding: 0 10px;
      }
      .right-input {
        width: 300px;
        padding: 0 10px;
      }
      .feature-iron-list {
        max-height: 800px;
        overflow: auto;
      }
      .feature-column {
        width: 200px;
        max-width: 200px;
        overflow-wrap: break-word;
        text-align: left;
      }
      .legend-column {
        width: 120px;
      }
      .stats-column {
        width: 150px;
        max-width: 150px;
        overflow-wrap: break-word;
        text-align: right;
      }
      .chart-column {
        width: 580px;
        text-align: center;
      }
      .table-row {
        display: table-row;
      }
      .table-cell {
        display: table-cell;
        vertical-align: top;
        padding: 10px 5px 0
      }
      .chart-column.table-cell {
        display: table-cell;
        vertical-align: top;
        padding: 10px 0 0 20px
      }
      .header-row {
        clear: both;
      }
      .header-row > .table-cell {
        font-size: 14pt;
        padding: 0 5px 0;
        border-bottom: 1px solid black;
      }
      .stats-header-text {
        text-align: right;
      }
      .chart-header-text {
        text-align: center;
      }
      .table-holder {
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        margin-left: 30px;
      }
      .table-left {
        margin: 20px 20px 0 0;
      }
      .table-right {
        margin: 20px 0 0 0;
      }
      .hidden {
        display: none;
      }
      .legend-holder {
        display: flex;
        margin: 8px 0 0 38px;
      }
      .legend-box {
        width: 8px;
        height: 8px;
        margin-top: 6px;
      }
      .legend-row {
        display: flex;
      }
      .legend-name {
        margin: 3px 10px 0 5px;
        font-size: 12px;
      }
      /* Give min height to placeholder in paper-input to get around colab embedding
       * alignment issue.
       */
      :host paper-input-container > .floated-label-placeholder {
        min-height: 20px;
      }
    </style>
    <template is="dom-if" if="[[_dataModel]]">
      <div class$="[[_getControlsWrapperClass(_dataModel)]]">
        <div class="controls">
          <paper-dropdown-menu class="left-dropdown input-control" label="Sort by">
            <paper-listbox class="dropdown-content" selected="{{_sortOrder}}" slot="dropdown-content">
              <template is="dom-repeat" items="[[_sortOptions]]" as="option">
                <paper-item>[[option.name]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          <paper-checkbox noink class="middle-checkbox" checked="{{_reverseOrder}}">
            Reverse order
          </paper-checkbox>
          <paper-input class="right-input input-control" label="Feature search (regex enabled)" value="{{searchString}}" auto-validate="true" validator="filter-validator">
            <facets-overview-filter-validator validator-name="filter-validator">
            </facets-overview-filter-validator>
          </paper-input>
        </div>
        <div class="feature-checkboxes">
          <div class="features-text">Features: </div>
          <template is="dom-repeat" items="[[_featureSpecArray]]" as="specAndList">
          <div>
            <paper-checkbox noink checked="true" class="feature-checkbox" id="[[_getSpecCheckboxId(specAndList)]]" on-change="_featureSpecCheck">
              [[_getSpecCheckboxText(specAndList)]]
            </paper-checkbox>
          </div>
        </template>
        </div>
      </div>
      <template is="dom-if" if="[[_hasMultipleDatasets(_dataModel)]]">
        <div class="legend-holder">
          <template is="dom-repeat" items="[[_getDatasets(_dataModel)]]" as="dataset" index-as="datasetIndex">
            <div class="legend-row">
              <div class="legend-box" style="[[_getLegendBoxStyle(_dataModel, datasetIndex)]]"></div>
              <div class="legend-name">[[_getDatasetName(_dataModel, datasetIndex)]]</div>
            </div>
          </template>
        </div>
      </template>
      <div class="table-holder">
        <facets-overview-table features="[[_getNumericFeatureListItems(_dataModel, searchString, _sortOrder, _reverseOrder, _featureSpecCheckboxes)]]" data-model="[[_dataModel]]" feature-slice-selection="{{featureSliceSelection}}" numeric="true" class="table-left" compare-mode="[[compareMode]]">
        </facets-overview-table>
        <facets-overview-table features="[[_getNonNumericFeatureListItems(_dataModel, searchString, _sortOrder, _reverseOrder, _featureSpecCheckboxes)]]" data-model="[[_dataModel]]" feature-slice-selection="{{featureSliceSelection}}" class="table-right" compare-mode="[[compareMode]]">
        </facets-overview-table>
      </div>
    </template>
  </template>
</dom-module>
















<dom-module id="vz-example-viewer">
  <template>
    <style id="linter-paper-button-style">
      /**
       * This style preserves the styling previous to
       * https://github.com/PolymerElements/paper-button/pull/115
       * This change can break the layout of paper-button content.
       * Remove this style to apply the change, more details at b/70528356.
       */
      paper-button {
        display: inline-block;
        text-align: center;
        font-family: inherit;
      }
    </style>
    <style>
      :host {
        display: flex;
        position: relative;
      }

      .seq-feat {
        margin-left: 16px;
      }

      .value-list {
        width: 100%;
      }

      .slider-holder {
        display: flex;
      }

      .slider-label {
        margin-right: 10px;
        margin-top: 16px;
      }

      .outer {
        width: 100%;
        overflow: auto;
      }

      .image {
        /* <img> elements are used to load to a canvas so they aren't displayed. */
        display: none;
      }

      .flex-controls {
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
      }

      .value-pills-holder {
        flex-grow: 1;
        flex-basis: 100%;
      }

      iron-autogrow-textarea {
        border: 1px solid #ffffff;
        border-radius: 4px;
        font-size: 14px;
        -moz-appearance: none;
        -webkit-appearance: none;
        color: #3c4043;
      }

      iron-autogrow-textarea.value-same {
        color: #5f6368;
      }

      iron-autogrow-textarea.value-different {
        color: #34a853;
        --iron-autogrow-textarea: {
          font-weight: 500;
        }
      }

      .value-pill {
        text-align: left;
        margin: 4px;
        padding: 4px 8px;
        color: #3c4043;
      }

      .value-pill:hover {
        background: #f8f9fa;
      }

      .value-pill[focused] {
        border: 1px solid #ffeb3b;
        background: #f8f9fa;
      }

      .value-compare {
        text-align: left;
        padding: 4px 8px;
      }

      .value-pill-stacked {
        width: 100%;
        margin: 4px 4px 4px 0;
        padding: 2px;
      }

      .value-pill-grid {
        width: 120px;
        margin: 4px 8px 4px 0;
      }

      .feature-name {
        display: flex;
        padding-left: 4px;
        margin: 4px 20px 4px 8px;
        justify-content: space-between;
        color: #80868b;
      }

      .feature-name-text {
        width: 300px;
        max-width: 300px;
        min-width: 150px;
        font-size: 14px;
        margin-top: 4px;
        color: #3c4043;
        line-height: 1.6em;
        text-overflow: ellipsis;
        white-space: pre-wrap;
        word-wrap: break-word;
        padding-right: 8px;
      }

      .feature-name-header-text {
        width: 300px;
        max-width: 300px;
        min-width: 150px;
        color: #202124;
        font-size: 12px;
        line-height: 1.8em;
        text-overflow: ellipsis;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .feature-name.feature-name-header {
        padding: 4px 4px 0px 4px;
        background: #f8f9fa;
        margin: 0px;
        border-bottom: 1px solid #e8eaed;
      }

      .slider {
        --paper-slider-input: {
          width: 100px;
        }
      }

      .hide-controls {
        display: none;
      }

      .indent {
        margin-left: 16px;
      }

      .scale-label {
        margin-top: 10px;
        margin-right: 10px;
      }

      .windowing-label {
        width: 110px;
      }

      .control-toggle-button {
        float: left;
        max-height: 20px;
        max-width: 20px;
        padding: 0;
      }

      .expand-button-holder {
        margin-bottom: 10px;
      }

      .delete-value-button {
        position: absolute;
        background: #ffe603;
        color: #5f6368;
        border-radius: 12px;
        max-width: 24px;
        max-height: 24px;
        padding: 0;
        margin-top: 2px;
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms;
      }

      .delete-value-button.delete-value-button-hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms, visibility 200ms;
      }

      .delete-feature-button {
        max-height: 20px;
        max-width: 20px;
        padding: 0;
        margin-left: 4px;
        margin-top: 0px;
      }

      .add-value-button {
        margin-top: 2px;
        max-height: 20px;
        max-width: 20px;
        min-height: 20px;
        min-width: 20px;
        padding: 0;
        color: #80868b;
      }

      .add-feature-button {
        margin-left: 0;
        margin-bottom: 10px;
      }

      .upload-image-button {
        margin: 0 0 0 5px;
        padding: 0;
        width: 16px;
        height: 16px;
        color: white;
      }

      .imagecard {
        margin: 4px;
      }

      .image-scale-button {
        margin-bottom: 5px;
      }

      .saliency-legend-label {
        margin-bottom: 5px;
      }

      .feature-dialog {
        display: flex;
        flex-direction: column;
      }

      .feature-dialog-button {
        text-transform: none;
        text-align: left;
      }

      .image-bottom-bar {
        width: 100%;
        background: #3c4043;
      }

      .image-upload-input {
        display: none;
      }

      .space-for-more-button {
        width: 20px;
      }

      .value-header-text {
        min-width: 130px;
        width: 130px;
        color: #202124;
        font-size: 12px;
        line-height: 1.8em;
      }

      paper-dialog {
        border-radius: 10px;
      }

      .control-button {
        background-color: white;
        border: 1px solid #dadce0;
        color: var(--tb-orange-dark);
        font-size: 14px;
        font-weight: 500;
        padding: 8px 12px;
        text-transform: none;
        margin: 5px;
      }

      .control-button[disabled] {
        color: #dadce0;
      }

      .value-text {
        border-bottom: 2px solid #ffeb3b;
      }

      .compare-value-text {
        border-bottom: 2px solid #34a853;
      }

      .no-compare-value-text {
        border-bottom: 0;
      }
    </style>
    <div class="outer">
      <template is="dom-if" if="[[showSearchBox]]">
        <paper-input value="{{featureSearchValue}}" label="Search" class="filter-input" no-label-float>
          <iron-icon icon="icons:search" prefix></iron-icon>
        </paper-input>
      </template>
      <div class="feature-name feature-name-header">
        <div class="feature-name-header-text">Feature</div>
        <div class="value-pills-holder flex-controls value-header-text">
          <div class="value-text">Value(s)</div>
        </div>
        <template is="dom-if" if="[[compareMode]]">
          <div class="value-pills-holder flex-controls value-header-text">
            <div class$="[[getCompareHeaderClass(highlightDifferences)]]">
              [[compareTitle]]
            </div>
          </div>
        </template>
        <div class="space-for-more-button"></div>
      </div>
      <template is="dom-repeat" items="[[filteredFeaturesList]]" as="feat">
        <template is="dom-if" if="[[isImage(feat.name)]]">
          <div class="feature-name">
            <div class="feature-name-text">[[feat.name]]</div>
            <div class="value-pills-holder">
              <paper-card id="[[getImageCardId(feat.name)]]" class="imagecard">
                <img class="image" src$="[[getImageSrc(feat.name)]]" id="[[getImageId(feat.name)]]">
                <canvas id="[[getCanvasId(feat.name)]]" data-feature="[[feat.name]]"></canvas>
                <template is="dom-if" if="[[shouldShowImageControls(hasImage, allowImageControls)]]">
                  <div>Image windowing (contrast)</div>
                  <div class="slider-holder indent">
                    <div class="slider-label windowing-label">
                      Window center:
                    </div>
                    <paper-slider class="slider" editable="true" max="255" immediate-value="{{windowCenter}}" value="[[windowCenter]]">
                    </paper-slider>
                  </div>
                  <div class="slider-holder indent">
                    <div class="slider-label windowing-label">
                      Window width:
                    </div>
                    <paper-slider class="slider" editable="true" max="512" min="1" immediate-value="{{windowWidth}}" value="[[windowWidth]]">
                    </paper-slider>
                  </div>
                  <div class="flex-controls">
                    <div class="scale-label">Image scale percentage:</div>
                    <paper-input no-label-float type="number" min="10" max="500" value="{{imageScalePercentage}}">
                    </paper-input>
                    <paper-button class="image-scale-button" on-click="updateImages">
                      set
                    </paper-button>
                  </div>
                </template>
                <div class="image-bottom-bar">
                  <paper-icon-button class$="[[getUploadImageClass(readonly)]]" icon="file-upload" on-click="uploadImageClicked" data-feature="[[feat.name]]" title="Upload image">
                  </paper-icon-button>
                  <paper-input class="image-upload-input" type="file" on-change="handleImageUpload" data-feature="[[feat.name]]" data-index="[[index]]">
                  </paper-input>
                </div>
              </paper-card>
            </div>
            <template is="dom-if" if="[[compareMode]]">
              <div class="value-pills-holder">
                <paper-card id="[[getCompareImageCardId(feat.name)]]" class="imagecard">
                  <img class="image" src$="[[getCompareImageSrc(feat.name)]]" id="[[getCompareImageId(feat.name)]]">
                  <canvas id="[[getCompareCanvasId(feat.name)]]" data-feature="[[feat.name]]"></canvas>
                  <div class="image-bottom-bar"></div>
                </paper-card>
              </div>
            </template>
            <paper-icon-button icon="more-horiz" class$="[[getAddValueButtonClass(readonly)]]" on-click="featureMoreClicked" data-feature="[[feat.name]]"></paper-icon-button>
            <paper-dialog id="[[getFeatureDialogId(feat.name)]]" horizontal-align="right" vertical-align="bottom">
              <div class="feature-dialog">
                <paper-button data-feature="[[feat.name]]" on-click="deleteFeature" class="feature-dialog-button">
                  Delete feature
                </paper-button>
              </div>
            </paper-dialog>
          </div>
        </template>
        <template is="dom-if" if="[[!isImage(feat.name)]]">
          <div class="feature-name">
            <div class="feature-name-text">[[feat.name]]</div>
            <div class="flex-controls value-pills-holder">
              <template is="dom-if" if="[[isExpanded(feat.name, expandAllFeatures)]]">
                <template is="dom-repeat" items="[[getFeatureValues(feat.name)]]" as="value">
                  <iron-autogrow-textarea class$="[[getInputPillClass(feat.name, displayMode)]]" readonly$="[[readonly]]" on-input="onValueChanged" on-focus="onInputFocus" on-blur="onInputBlur" data-feature="[[feat.name]]" data-index="[[index]]" value="[[value]]">
                  </iron-autogrow-textarea>
                </template>
              </template>
              <template is="dom-if" if="[[!isExpanded(feat.name, expandAllFeatures)]]">
                <iron-autogrow-textarea class$="[[getInputPillClass(feat.name, displayMode)]]" readonly$="[[readonly]]" on-input="onValueChanged" on-focus="onInputFocus" on-blur="onInputBlur" data-feature="[[feat.name]]" data-index="[[zeroIndex]]" value="[[getFirstFeatureValue(feat.name)]]">
                </iron-autogrow-textarea>
                <template is="dom-if" if="[[featureHasMultipleValues(feat.name)]]">
                  <paper-button data-feature="[[feat.name]]" on-click="expandFeature" class$="[[getInputPillClass(feat.name, displayMode)]]">
                    ...
                  </paper-button>
                </template>
              </template>
            </div>
            <template is="dom-if" if="[[compareMode]]">
              <div class="flex-controls value-pills-holder">
                <template is="dom-if" if="[[isExpanded(feat.name, expandAllFeatures)]]">
                  <template is="dom-repeat" items="[[getCompareFeatureValues(feat.name)]]" as="value">
                    <iron-autogrow-textarea class$="[[getCompareInputClass(feat.name, displayMode, index)]]" readonly value="[[value]]">
                    </iron-autogrow-textarea>
                  </template>
                </template>
                <template is="dom-if" if="[[!isExpanded(feat.name, expandAllFeatures)]]">
                  <iron-autogrow-textarea class$="[[getCompareInputClass(feat.name, displayMode, zeroIndex)]]" readonly value="[[getFirstCompareFeatureValue(feat.name)]]">
                  </iron-autogrow-textarea>
                  <template is="dom-if" if="[[compareFeatureHasMultipleValues(feat.name)]]">
                    <paper-button data-feature="[[feat.name]]" on-click="expandFeature" class$="[[getCompareInputClass(feat.name, displayMode)]]">
                      ...
                    </paper-button>
                  </template>
                </template>
              </div>
            </template>

            <paper-icon-button icon="more-horiz" class$="[[getAddValueButtonClass(readonly)]]" on-click="featureMoreClicked" data-feature="[[feat.name]]"></paper-icon-button>
            <paper-dialog id="[[getFeatureDialogId(feat.name)]]" horizontal-align="right" vertical-align="bottom">
              <div class="feature-dialog">
                <paper-button data-feature="[[feat.name]]" on-click="deleteFeature" class="feature-dialog-button">
                  Delete feature
                </paper-button>
                <paper-button data-feature="[[feat.name]]" on-click="addValue" class="feature-dialog-button">
                  Add feature value
                </paper-button>
              </div>
            </paper-dialog>
          </div>
        </template>
      </template>
      <template is="dom-if" if="[[isSeqExample(maxSeqNumber)]]">
        <div class="slider-holder">
          <div class="slider-label">Sequence Number:</div>
          <paper-slider class="slider" editable="true" max="[[maxSeqNumber]]" value="{{seqNumber}}">
          </paper-slider>
        </div>
        <template is="dom-repeat" items="[[filteredSeqFeaturesList]]" as="seqfeat">
          <div class="seqfeat">
            <template is="dom-if" if="[[isImage(seqfeat.name)]]">
              <div class="feature-name">
                <div class="feature-name-text">[[seqfeat.name]]</div>
                <div class="value-pills-holder">
                  <paper-card id="[[getImageCardId(seqfeat.name)]]" class="imagecard">
                    <img class="image" src$="[[getSeqImageSrc(seqfeat.name, seqNumber)]]" id="[[getImageId(seqfeat.name)]]">
                    <canvas id="[[getCanvasId(seqfeat.name)]]" data-feature="[[seqfeat.name]]" data-seq-num="[[seqNumber]]"></canvas>
                    <template is="dom-if" if="[[shouldShowImageControls(hasImage, allowImageControls)]]">
                      <div class="image-controls">
                        <div>Image windowing (contrast)</div>
                        <div class="slider-holder indent">
                          <div class="slider-label windowing-label">
                            Window center:
                          </div>
                          <paper-slider class="slider" editable="true" max="255" immediate-value="{{windowCenter}}" value="[[windowCenter]]">
                          </paper-slider>
                        </div>
                        <div class="slider-holder indent">
                          <div class="slider-label windowing-label">
                            Window width:
                          </div>
                          <paper-slider class="slider" editable="true" max="512" min="1" immediate-value="{{windowWidth}}" value="[[windowWidth]]">
                          </paper-slider>
                        </div>
                        <div class="flex-controls">
                          <div class="scale-label">Image scale percentage:</div>
                          <paper-input no-label-float type="number" min="10" max="500" value="{{imageScalePercentage}}">
                          </paper-input>
                          <paper-button class="image-scale-button" on-click="updateImages">
                            set
                          </paper-button>
                        </div>
                      </div>
                    </template>
                    <div class="image-bottom-bar">
                      <paper-icon-button class$="[[getUploadImageClass(readonly)]]" icon="file-upload" on-click="uploadImageClicked" data-feature="[[seqfeat.name]]" title="Upload image">
                      </paper-icon-button>
                      <paper-input class="image-upload-input" type="file" on-change="handleImageUpload" data-feature="[[seqfeat.name]]" data-index="[[index]]" data-seq-num="[[seqNumber]]">
                      </paper-input>
                    </div>
                  </paper-card>
                </div>
                <template is="dom-if" if="[[compareMode]]">
                  <div class="value-pills-holder">
                    <paper-card id="[[getCompareImageCardId(seqfeat.name)]]" class="imagecard">
                      <img class="image" src$="[[getCompareSeqImageSrc(seqfeat.name, seqNumber)]]" id="[[getCompareImageId(seqfeat.name)]]">
                      <canvas id="[[getCompareCanvasId(seqfeat.name)]]" data-feature="[[seqfeat.name]]" data-seq-num="[[seqNumber]]"></canvas>
                      <div class="image-bottom-bar"></div>
                    </paper-card>
                  </div>
                </template>
                <paper-icon-button icon="more-horiz" class$="[[getAddValueButtonClass(readonly)]]"></paper-icon-button>
                <paper-dialog>
                  <paper-button data-feature="[[seqfeat.name]]" on-click="deleteFeature">
                    Delete feature
                  </paper-button>
                </paper-dialog>
              </div>
            </template>
            <template is="dom-if" if="[[!isImage(seqfeat.name)]]">
              <div class="feature-name">
                <div class="feature-name-text">[[seqfeat.name]]</div>
                <div class="flex-controls value-pills-holder">
                  <template is="dom-if" if="[[isExpanded(seqfeat.name, expandAllFeatures)]]">
                    <template is="dom-repeat" items="[[getSeqFeatureValues(seqfeat.name, seqNumber)]]" as="seqvalue">
                      <iron-autogrow-textarea class$="[[getInputPillClass(seqfeat.name, displayMode)]]" readonly$="[[readonly]]" on-input="onValueChanged" on-focus="onInputFocus" on-blur="onInputBlur" data-feature="[[seqfeat.name]]" data-index="[[index]]" data-seq-num="[[seqNumber]]" value="[[seqvalue]]">
                      </iron-autogrow-textarea>
                    </template>
                  </template>
                  <template is="dom-if" if="[[!isExpanded(seqfeat.name, expandAllFeatures)]]">
                    <iron-autogrow-textarea class$="[[getInputPillClass(seqfeat.name, displayMode)]]" readonly$="[[readonly]]" on-input="onValueChanged" on-focus="onInputFocus" on-blur="onInputBlur" data-feature="[[seqfeat.name]]" data-index="[[zeroIndex]]" data-seq-num="[[seqNumber]]" value="[[getFirstSeqFeatureValue(seqfeat.name, seqNumber)]]">
                    </iron-autogrow-textarea>
                    <template is="dom-if" if="[[seqFeatureHasMultipleValues(seqfeat.name, seqNumber)]]">
                      <paper-button data-feature="[[seqfeat.name]]" on-click="expandFeature" class$="[[getInputPillClass(seqfeat.name, displayMode)]]">
                        ...
                      </paper-button>
                    </template>
                  </template>
                </div>
                <template is="dom-if" if="[[compareMode]]">
                  <div class="flex-controls value-pills-holder">
                    <template is="dom-if" if="[[isExpanded(seqfeat.name, expandAllFeatures)]]">
                      <template is="dom-repeat" items="[[getCompareSeqFeatureValues(seqfeat.name, seqNumber)]]" as="seqvalue">
                        <iron-autogrow-textarea class$="[[getSeqCompareInputClass(seqfeat.name, displayMode, seqNumber, index)]]" readonly value="[[seqvalue]]">
                        </iron-autogrow-textarea>
                      </template>
                    </template>
                    <template is="dom-if" if="[[!isExpanded(seqfeat.name, expandAllFeatures)]]">
                      <iron-autogrow-textarea class$="[[getSeqCompareInputClass(seqfeat.name, displayMode, seqNumber, zeroIndex)]]" readonly value="[[getFirstCompareSeqFeatureValue(seqfeat.name, seqNumber)]]">
                      </iron-autogrow-textarea>
                      <template is="dom-if" if="[[compareSeqFeatureHasMultipleValues(seqfeat.name, seqNumber)]]">
                        <paper-button data-feature="[[seqfeat.name]]" on-click="expandFeature" class$="[[getSeqCompareInputClass(seqfeat.name, displayMode, seqNumber)]]">
                          ...
                        </paper-button>
                      </template>
                    </template>
                  </div>
                </template>
                <paper-icon-button icon="more-horiz" class$="[[getAddValueButtonClass(readonly)]]"></paper-icon-button>
                <paper-dialog>
                  <paper-button data-feature="[[seqfeat.name]]" on-click="deleteFeature">
                    Delete feature
                  </paper-button>
                  <paper-button data-feature="[[seqfeat.name]]" data-seq-num="[[seqNumber]]" on-click="addValue" class="feature-dialog-button">
                    Add feature value
                  </paper-button>
                </paper-dialog>
              </div>
            </template>
          </div>
        </template>
      </template>
      <paper-icon-button on-click="openAddFeatureDialog" icon="add" title="Add feature" class$="[[getAddValueButtonClass(readonly)]]">
      </paper-icon-button>
    </div>
    <paper-icon-button id="deletevalue" icon="delete" class$="[[getDeleteValueButtonClass(readonly, showDeleteValueButton)]]" data-feature="[[focusedFeatureName]]" data-index="[[focusedFeatureValueIndex]]" data-seq-num="[[focusedSeqNumber]]" on-click="deleteValue" title="Delete value">
    </paper-icon-button>
    <paper-dialog id="addFeatureDialog">
      <h2>Add Feature</h2>
      <paper-input label="Feature name" value="{{newFeatureName}}"></paper-input>
      <paper-radio-group selected="{{newFeatureType}}">
        <paper-radio-button name="int">Int</paper-radio-button>
        <paper-radio-button name="float">Float</paper-radio-button>
        <paper-radio-button name="bytes">Bytes</paper-radio-button>
      </paper-radio-group>
      <paper-button dialog-dismiss class="control-button" on-click="addFeature" disabled="[[!shouldEnableAddFeature(newFeatureName)]]">
        Create
      </paper-button>
    </paper-dialog>
  </template>
  
</dom-module>


<dom-module id="tf-interactive-inference-dashboard">
  <template>
    <style id="linter-paper-button-style">
      /**
       * This style preserves the styling previous to
       * https://github.com/PolymerElements/paper-button/pull/115
       * This change can break the layout of paper-button content.
       * Remove this style to apply the change, more details at b/70528356.
       */
      paper-button {
        display: inline-block;
        text-align: center;
        font-family: inherit;
      }
    </style>
    <style>
      :host {
        font-family: 'Roboto', 'Noto', sans-serif;
        --paper-tab-ink: var(--tb-orange-dark);
        --wit-color-gray300: #dadce0;
      }

      [hidden] {
        display: none !important;
      }

      #classification {
        width: 40%;
      }

      .example-holder {
        width: 100%;
      }

      .inference-section-holder {
        display: flex;
        margin-top: 6px;
        margin-right: 6px;
      }

      .inference-section {
        width: 100%;
        border: 1px solid var(--wit-color-gray300);
      }

      .inference-viewer {
        max-height: 35%;
        flex-grow: 1;
      }

      .compare-inference-viewer {
        border-left: 1px solid var(--wit-color-gray300);
      }

      .tf-option-selector-0 .content-wrapper.tf-option-selector > * {
        width: 40%;
      }

      paper-progress {
        --paper-progress-active-color: var(--tb-orange-strong);
      }

      #progress {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
      }

      .pdplot-progress {
        width: 100%;
      }

      .noexamples {
        position: absolute;
        top: 75px;
        left: 30px;
      }

      .center {
        position: relative;
      }

      .info-text {
        font-size: 14px;
        color: #3c4043;
        letter-spacing: 0.25px;
        line-height: 20px;
        margin: 12px auto;
      }

      .pd-info-text {
        font-size: 18px;
        color: #3c4043;
        line-height: 24px;
        padding-top: 12px;
        padding-right: 4px;
        padding-left: 12px;
      }

      .pd-no-features-text {
        font-size: 18px;
        color: #3c4043;
        padding: 12px 48px;
      }

      .accept-button-holder {
        display: flex;
        flex-direction: row-reverse;
      }

      .settings-button {
        margin-top: 4px;
      }

      .datapoint-right-controls-holder .control {
        flex-shrink: 0;
      }

      .button {
        font-size: 13px;
        margin: 10px 0 0 0;
        background-color: var(--tb-orange-strong);
        color: white;
      }

      .button[disabled] {
        background-color: #ccc;
      }

      .input-and-tooltip {
        display: flex;
      }

      .label-vocab-path-input {
        flex-grow: 1;
      }

      .threshold-dropdown {
        display: block;
        width: 150px;
        min-width: 150px;
        padding-right: 16px;
        --paper-input-container-input: {
          font-size: 14px;
          color: #3c4043;
        }
      }

      .short-dropdown {
        display: inline-block;
        width: 100px;
        min-width: 50px;
        padding-right: 5px;
        --paper-input-container-input: {
          font-size: 14px;
          color: #3c4043;
        }
      }

      .slider-label {
        margin-top: 8px;
      }

      .facet-label {
        --paper-input-container-underline: {
          display: none;
        }
        --paper-input-container-input: {
          font-weight: 500;
        }
      }

      .slider {
        width: 280px;
        --paper-slider-input: {
          width: 80px;
        }
      }

      .slider-model-one {
        --paper-slider-knob-color: #12b5ce;
        --paper-slider-active-color: #12b5ce;
      }

      .slider-model-two {
        --paper-slider-knob-color: #fa7817;
        --paper-slider-active-color: #fa7817;
      }

      paper-dialog.inference-settings {
        padding: 20px;
        width: 40%;
        max-width: 40%;
        overflow-y: auto;
        border-radius: 10px;
      }

      .dashboard-layout {
        display: flex;
        height: 100%;
        background-color: white;
      }

      .center {
        width: 60%;
      }

      .side-holder {
        position: relative;
        width: 40%;
        display: flex;
      }

      .side-content {
        padding-left: 5px;
        width: calc(100% - 10px);
        display: flex;
        flex-direction: column;
      }

      .side-tabs {
        display: flex;
        height: calc(100% - 50px);
      }

      .datapoint-tab {
        display: flex;
        width: 100%;
        overflow: auto;
      }

      .config-tab {
        width: 100%;
        display: flex;
      }

      .config-side-content {
        padding-left: 5px;
        width: 30%;
        overflow-y: auto;
        border-right: 1px solid var(--wit-color-gray300);
      }

      .config-main-content {
        width: 70%;
        display: flex;
        flex-direction: column;
        background: #f8f9fa;
      }

      .stats-tab {
        width: 100%;
        display: flex;
        overflow: auto;
      }

      .pd-tab {
        width: 100%;
        padding: 5px 10px;
      }

      .pd-plots-header {
        height: 52px;
        min-height: 52px;
        max-height: 52px;
        border-bottom: solid 2px var(--wit-color-gray300);
        display: flex;
        justify-content: space-between;
      }

      .pdplots-holder {
        flex-grow: 1;
        overflow-y: overlay;
        background: #f8f9fa;
      }

      .pd-range-hyphen {
        padding-right: 6px;
        padding-top: 8px;
      }

      .pd-range-control {
        border-bottom: solid 1px #fcc934;
        border-top: none;
        border-left: none;
        border-right: none;
        height: 36px;
        width: 104px;
        margin-right: 6px;
      }

      #overview {
        max-height: 100%;
        height: 100%;
      }

      .inference-header.heading {
        background: #e4f7fb;
      }

      .right-side {
        position: absolute;
        right: 0;
        top: 0;
      }

      .right-side-performance-tab {
        margin: 4px;
      }

      tf-confusion-matrix {
        display: block;
      }

      .datapoint-controls-holder.datapoint-control-buttons-holder {
        padding-left: 2px;
      }

      .datapoint-controls-holder.datapoint-control-search-holder {
        padding-left: 10px;
      }

      .datapoint-controls-holder {
        border-bottom: 1px solid var(--wit-color-gray300);
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: space-between;
        margin-left: 1px;
      }

      .datapoint-left-controls-holder {
        display: flex;
        flex-wrap: wrap;
      }

      .datapoint-right-controls-holder {
        display: flex;
        flex-direction: row-reverse;
        overflow: hidden;
      }

      .tf-category-pane {
        flex-grow: 1;
      }

      .tf-category-pane-content {
        flex-wrap: wrap;
        flex-grow: 1;
        padding: 12px;
        border: 1px solid var(--wit-color-gray300);
        border-top: none;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        background: white;
      }

      :host vz-line-chart2 {
        margin: 12px 12px 12px 24px;
        height: 180px;
        width: 300px;
        display: inline-block;
      }

      :host vz-bar-chart {
        margin: 12px 12px 12px 24px;
        height: 240px;
        width: 450px;
        display: inline-block;
      }

      .pd-input-container {
        display: block;
        flex-grow: 0;
        padding: 12px 48px 24px 24px;
        background: #fef7e0;
        border: solid 1px #fde293;
      }

      .style-input {
        width: 50px;
        text-align: right;
        background: white;
      }

      .feature-container-holder {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: white;
        display: none;
        flex-direction: column;
      }

      .datapoint-control-filter-input {
        border-radius: 2px;
        max-width: 60%;
        --paper-input-container: {
          padding: 4px 6px 2px 4px;
        }
        --paper-input-container-input: {
          font-size: 14px;
          color: #3c4043;
        }
        --paper-input-container-label: {
          font-size: 14px;
          color: #80868b;
        }
      }

      .datapoint-control-filter-input iron-icon {
        color: #9ba0a6;
      }

      .feature-search-input {
        padding-top: 3px;
        flex-grow: 1;
        max-width: 150px;
      }

      .num-buckets-input {
        width: 45px;
        margin-right: 8px;
      }

      .control-button {
        background-color: white;
        border: 1px solid var(--wit-color-gray300);
        color: var(--tb-orange-dark);
        font-size: 14px;
        font-weight: 400;
        padding: 8px 12px;
        text-transform: none;
        margin: 5px;
      }

      .control-button[disabled] {
        color: #5f6368;
        background-color: #f4f4f4;
      }

      .main-button {
        background-color: var(--tb-orange-dark);
        border: 1px solid var(--tb-orange-dark);
        color: white;
        font-size: 14px;
        font-weight: 400;
        padding: 8px 12px;
        text-transform: none;
        margin: 5px;
      }

      .main-button[disabled] {
        background-color: lightgray;
        border: 1px solid lightgray;
        color: gray;
      }

      .optimize-threshold-button {
        margin: 5px 0;
        width: 150px;
        min-width: 150px;
        margin-right: 16px;
      }

      .close-partial-deps-button {
        margin: 10px;
      }

      paper-tabs {
        flex-grow: 1;
        width: 100%;
        height: 100%;
        --paper-tabs-selection-bar-color: var(--tb-orange-dark);
      }

      paper-tab {
        font-size: 14px;
        font-weight: 400;
        padding: 0 24px;
        letter-spacing: 0.1px;
      }

      paper-tab:not(.iron-selected) {
        color: #3c4043;
      }

      paper-tab.iron-selected {
        color: #202124;
        font-weight: 500;
      }

      .perfs-holder {
        display: flex;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        margin: 4px;
        position: relative;
      }

      .perf-holder {
        margin: 8px;
        position: relative;
      }

      .perf-curve-x-label {
        position: absolute;
        bottom: 2px;
        left: 138px;
        font-size: 12px;
        color: #5f6368;
        padding: 0px;
        width: 120px;
        text-align: center;
      }

      .perf-curve-y-label {
        position: absolute;
        left: 44px;
        bottom: 54px;
        transform: rotate(270deg);
        transform-origin: left bottom;
        font-size: 12px;
        color: #5f6368;
        width: 120px;
        text-align: center;
      }

      .flex {
        display: flex;
      }

      .space-between {
        justify-content: space-between;
      }

      .flex-wrap {
        display: flex;
        flex-wrap: wrap;
      }

      .optimize-text {
        margin: 5px 0;
        color: grey;
        font-size: 14px;
      }

      .threshold-cost-input {
        width: 150px;
        min-width: 150px;
        margin-right: 16px;
        --paper-input-container-input: {
          font-size: 14px;
          color: #3c4043;
        }
        --paper-input-container-label: {
          font-size: 14px;
          color: #80868b;
        }
      }

      .bold {
        font-weight: 500;
      }

      .indent {
        margin-left: 10px;
      }

      .feature-breakdown {
        margin-left: 12px;
      }

      .optimize-selection-button {
        margin-left: 0;
        margin-bottom: 5px;
      }

      .reg-table-category {
        text-align: left;
      }

      .reg-table-value {
        text-align: right;
      }

      .subfeature-table {
        margin-left: 10px;
      }

      .counterfactual-button-intro {
        padding: 7px 0 0 10px;
      }

      .main-vertical {
        width: 100%;
      }

      .main-bottom-bar {
        height: 52px;
        min-height: 52px;
        flex-grow: 0;
        display: flex;
        /* box-shadow: 0 2px 5px grey;
        margin-bottom: 3px; */
        border-bottom: solid 1px #dadce0;
        justify-content: space-between;
      }

      .main-content {
        height: 100%;
      }

      .dist-switch {
        display: flex;
        margin-top: 0;
      }

      .distance-vis-dropdown {
        margin-top: 0;
      }

      #distancedialog {
        width: 30%;
      }

      #distancedialog .buttons {
        color: #f57c00;
      }

      paper-radio-button {
        --paper-radio-button-label: {
          font-size: 14px;
          color: #3c4043;
        }
        --paper-radio-button-unchecked-color: #3c4043;
        --paper-radio-button-unchecked-ink-color: #3c4043;
        --paper-radio-button-checked-color: #3c4043;
        --paper-radio-button-checked-ink-color: #3c4043;
      }

      paper-icon-button {
        color: #5f6368;
      }

      paper-icon-button[disabled] {
        color: #9aa0a6;
      }

      .resizer {
        display: table;
        height: 100%;
        width: 8px;
        border-left: 1px solid var(--wit-color-gray300);
        border-right: 1px solid var(--wit-color-gray300);
        cursor: pointer;
      }

      .example-status {
        font-size: 12px;
        color: #5f6368;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 20px;
      }

      .example-id-label {
        padding: 9px 5px 9px 0;
      }

      .example-id-input {
        width: 70px;
        padding-top: 3px;
      }

      .heading-and-card {
        border: 1px solid lightgray;
        margin-right: 5px;
        margin-top: 5px;
        padding-top: 1px;
      }

      .editor-heading-and-card {
        flex: 1;
        overflow-y: overlay;
      }

      .heading {
        color: #5f6368;
        position: relative;
        padding: 10px 8px;
        background-color: #fef7e0;
        border-bottom: 1px solid var(--wit-color-gray300);
        border-top: none;
        border-left: none;
        border-right: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        width: 100%;
        text-align: left;
      }

      .card {
        padding: 0 10px 5px;
      }

      .no-padding-card {
        padding: 0;
      }

      .tooltip {
        --paper-tooltip: {
          font-size: 16px;
        }
        --paper-tooltip-delay-out: 2000ms;
      }

      .comment-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        margin-top: 10px;
        color: var(--tb-orange-dark);
      }

      .arrow-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        color: var(--tb-orange-dark);
      }

      .pd-arrow-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin-top: 5px;
        color: grey;
      }

      .pd-toggle {
        margin: 0 8px 0 20px;
      }

      .pd-entry-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-grow: 1;
      }

      .info-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin-top: 10px;
        color: grey;
      }

      .info-icon.cf-info-icon {
        margin-top: 12px;
      }

      .info-icon.thresh-info-icon {
        margin-top: -3px;
        vertical-align: middle;
      }

      .info-icon.pd-info-icon {
        margin-top: 15px;
      }

      .info-icon.threshold-info-icon {
        margin-top: 0;
        margin-bottom: 10px;
        margin-left: 5px;
      }

      .info-icon.performance-info-icon {
        margin-top: 18px;
        margin-bottom: 10px;
        margin-left: 5px;
      }

      .no-padding {
        padding: 0;
      }

      .resize-icon {
        display: table-cell;
        vertical-align: middle;
        color: grey;
        width: 10px;
        height: 10px;
        min-width: 10px;
        min-height: 10px;
      }

      .help-text {
        color: #5f6368;
        font-size: 10px;
        max-width: 200px;
      }

      .help-title {
        color: #007b7c;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
      }

      .help-title-margin {
        margin-top: 14px;
      }

      .help-title-margin-button {
        margin-top: 4px;
      }

      .help-title-margin-title {
        margin-top: 7px;
      }

      .dialog-link {
        color: #5f6368;
        font-size: 10px;
        font-style: italic;
        text-decoration: underline;
        cursor: pointer;
      }

      .perf-curve-text {
        color: #3c4043;
        font-size: 16px;
        margin-left: 44px;
        margin-bottom: -10px;
      }

      .conf-text {
        margin-bottom: 8px;
        color: #3c4043;
        font-size: 16px;
      }

      .dialog-text {
        font-style: normal;
        text-align: left;
      }

      .dialog-title {
        font-size: 14px;
        font-weight: 500;
      }

      .title-width {
        width: 250px;
        padding-right: 16px;
      }

      .datapoint-info-holder {
        margin: 24px auto;
        max-width: 380px;
        padding: 24px;
      }

      .onboarding-header {
        color: #202124;
        font-size: 22px;
        margin-bottom: 28px;
      }

      .onboarding-text {
        color: #3c4043;
        font-size: 14px;
        margin-bottom: 20px;
      }

      .control-info-header {
        color: #3c4043;
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
        margin-bottom: 15px;
      }

      .control-info-text {
        color: #3c4043;
        font-size: 14px;
        margin-bottom: 15px;
        max-width: 460px;
      }

      .button-prefix-label {
        margin: 12px 0 0 12px;
        color: grey;
        font-size: 14px;
      }

      .border-right {
        border-right: 1px solid var(--wit-color-gray300);
      }

      paper-dialog {
        color: #3c4043;
        border-radius: 10px;
        max-width: 600px;
      }

      .main-button.run-button {
        padding: 5px;
        flex-grow: 1;
      }

      .doc-image {
        width: 128px;
        height: 96px;
        border: 1px solid var(--wit-color-gray300);
      }

      .control-divider {
        margin: 5px 0 5px 5px;
        width: 5px;
        border-left: 1px solid var(--wit-color-gray300);
      }

      .optimization-radio {
        display: block;
        padding: 7px;
      }

      .optimization-radio-group {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
      }

      .infer-info {
        margin-left: 30px;
      }

      .scroll-x {
        overflow-x: auto;
      }

      .perf-table-clickable {
        cursor: pointer;
      }

      .perf-table-title-row {
        background: white;
        width: 100%;
        display: flex;
        border-bottom: 1px solid var(--wit-color-gray300);
        min-height: 52px;
        justify-content: space-between;
      }
      .perf-table-title {
        color: #3c4043;
        font-size: 18px;
        margin-left: 14px;
        margin-top: 16px;
      }
      .perf-table-sort-menu {
        margin-top: -10px;
      }
      .perf-table-header {
        background: white;
        width: 100%;
        font-weight: 500;
        color: #80868b;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0.25;
        display: flex;
        border-bottom: 1px solid var(--wit-color-gray300);
        min-height: min-content;
        padding-top: 12px;
        padding-bottom: 4px;
      }

      .perf-table-entries-holder {
        overflow-y: overlay;
        flex-grow: 1;
      }

      .perf-table-entry {
        background: white;
        color: #3c4043;
        font-size: 14px;
        border-bottom: solid 1px var(--wit-color-gray300);
      }

      .perf-table-entry.perf-table-entry-trivial {
        background: #f4f4f4;
      }

      .perf-table-entry-expanded {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 12px;
        border-left: 1px solid var(--wit-color-gray300);
        border-bottom: 1px solid var(--wit-color-gray300);
        border-right: 1px solid var(--wit-color-gray300);
        background: white;
      }

      .perf-table-row {
        width: 100%;
        display: flex;
        background: white;
        position: relative;
      }

      .perf-table-row-expanded {
        width: 100%;
        display: flex;
        border-bottom: 1px solid var(--wit-color-gray300);
        border-top: 1px solid var(--wit-color-gray300);
        border-radius: 2px;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
          0 1px 3px 1px rgba(60, 64, 67, 0.15);
        background: white;
        position: relative;
      }

      .perf-table-text-entry {
        height: 40px;
        padding-top: 16px;
      }
      .perf-table-num-entry {
        height: 40px;
        padding-top: 16px;
        text-align: right;
      }
      .perf-table-arrow {
        min-width: 40px;
        width: 40px;
        margin-top: 8px;
      }
      .perf-table-val {
        width: 30%;
      }
      .perf-table-count {
        width: 10%;
        margin-right: 20px;
        text-align: right;
      }
      .perf-table-model {
        min-width: 100px;
        width: 100px;
      }
      .perf-table-model-single {
        display: none;
      }
      .perf-table-threshold {
        width: 280px;
        min-width: 280px;
        text-align: center;
      }
      .perf-table-error {
        width: 15%;
        text-align: right;
      }
      .perf-table-sq-error {
        width: 15%;
        text-align: right;
        margin-right: 20px;
      }
      .perf-table-fp {
        width: 15%;
        text-align: right;
      }
      .perf-table-fn {
        width: 15%;
        text-align: right;
      }
      .perf-table-acc {
        width: 15%;
        text-align: right;
        margin-right: 20px;
      }
      .perf-table-f1 {
        width: 10%;
        text-align: right;
        margin-right: 20px;
      }
      .perf-button {
        margin-top: 10px;
      }

      .perf-sort-box {
        display: flex;
        flex-direction: row-reverse;
      }
      .counterfactual-toggle {
        margin: 4px 4px 4px 6px;
        padding-top: 4px;
        --paper-toggle-button-checked-bar-color: #81c995;
      }
      .counterfactual-delta {
        display: flex;
        margin-right: 6px;
      }
      .counterfactual-delta label {
        padding-top: 12px;
        margin-left: 8px;
        margin-right: 4px;
        font-size: 14px;
        color: rgb(60, 64, 67);
      }
      .counterfactual-delta paper-slider {
        height: 40px;
        --paper-slider-active-color: #81c995;
        --paper-slider-knob-color: #81c995;
        --paper-slider-input-container-input: {
          font-size: 14px;
          color: rgb(60, 64, 67);
        }
      }
      .datapoint-button {
        color: #202124;
        background: #fde293;
      }
      .infer-button {
        color: white;
        background: #128eaf;
      }
      .flex-grow {
        flex-grow: 1;
      }
      .flex-row-reverse {
        flex-direction: row-reverse;
      }
      .threshold-info-holder {
        margin-top: -2px;
      }
      .tabs {
        padding-left: 32px;
        text-transform: none;
      }
      .rotated-icon {
        transform: rotate(270deg);
      }
      .datapoint-control-button {
        width: 28px;
        height: 28px;
        padding: 4px;
        margin-top: 4px;
      }
      .pd-holder {
        position: relative;
        width: 300px;
      }
      .pd-y-label {
        color: #5f6368;
        font-size: 12px;
        left: -20px;
        padding: 0px;
        position: absolute;
        top: 80px;
        transform: rotate(270deg);
      }
      .pd-x-label {
        bottom: 0;
        color: #5f6368;
        font-size: 12px;
        overflow: hidden;
        padding: 0 0 0 40px;
        position: absolute;
        text-align: center;
        text-overflow: ellipsis;
        width: 100%;
        white-space: nowrap;
      }
      paper-toggle-button {
        font-size: 14px;
        --paper-toggle-button-checked-button-color: white;
        --paper-toggle-button-label-color: #3c4043;
      }
      .button-and-progress-holder {
        margin-top: 4px;
        position: relative;
      }
      .sort-progress {
        position: absolute;
        top: 8px;
        left: 7px;
        width: 220px;
        --paper-progress-active-color: var(--tb-orange-strong);
      }
      #attributionLegend {
        width: 160px;
        height: 32px;
        margin-top: 8px;
        margin-right: 8px;
      }
    </style>
    <tf-plugin-dialog id="initialDialog"></tf-plugin-dialog>
    <paper-dialog id="inferencesettings" class="inference-settings" opened="[[!local]]">
      <tf-inference-panel inference-address="{{inferenceAddress}}" model-name="{{modelName}}" examples-path="{{examplesPath}}" model-type="{{modelType}}" model-version="{{modelVersion}}" model-signature="{{modelSignature}}" max-examples="{{maxExamples}}" label-vocab-path="{{labelVocabPath}}" multi-class="{{multiClass}}" sampling-odds="{{samplingOdds}}" sequence-examples="{{sequenceExamples}}" max-classes-to-display="{{maxInferenceEntriesPerRun}}" use-predict-api="{{usePredictApi}}" predict-output-tensor="{{predictOutputTensor}}" predict-input-tensor="{{predictInputTensor}}">
      </tf-inference-panel>
      <div class="accept-button-holder">
        <paper-button on-tap="getExamplesAndCloseSettings_" class="main-button" disabled$="[[shouldDisableGetExamplesButton_(examplesPath, maxExamples)]]">
          Accept
        </paper-button>
        <paper-button dialog-dismiss class="control-button">Cancel</paper-button>
      </div>
    </paper-dialog>
    <paper-dialog id="deletedialog">
      <p>Are you sure you want to delete the selected datapoint?
      <div class="buttons">
        <paper-button dialog-dismiss class="control-button">Cancel</paper-button>
        <paper-button dialog-confirm autofocus on-tap="deleteDatapoint_" class="main-button">Delete</paper-button>
      </div>
    </paper-dialog>
    <paper-dialog id="distancedialog">
      <h2>Show similarity to selected datapoint</h2>
      <paper-input value="{{facetDistFeatureName}}" label="Metric name" class="datapoint-control-filter-input">
      </paper-input>
      <div class="radiolabel">Distance type</div>
      <paper-radio-group class="dist-switch" selected="{{facetDistSwitch}}">
        <paper-radio-button class="dist-radio" name="L1" disabled$="[[customDistanceFunctionSet]]">L1</paper-radio-button>
        <paper-radio-button class="dist-radio" name="L2" disabled$="[[customDistanceFunctionSet]]">L2</paper-radio-button>
        <paper-radio-button class="dist-radio" name="Custom" hidden$="[[!customDistanceFunctionSet]]">User-specified</paper-radio-button>
      </paper-radio-group>
      <paper-dropdown-menu label="Apply to datapoints visualization" class="threshold-dropdown distance-vis-dropdown">
        <paper-listbox slot="dropdown-content" selected="{{facetDistSetting}}" attr-for-selected="name">
          <paper-item name="colorBy">Color By</paper-item>
          <paper-item name="horizontalFacet">X-Axis Binning</paper-item>
          <paper-item name="verticalFacet">Y-Axis Binning</paper-item>
          <paper-item name="horizontalPosition">X-Axis Scatter</paper-item>
          <paper-item name="verticalPosition">Y-Axis Scatter</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <div class="buttons">
        <paper-button dialog-dismiss class="control-button">Cancel</paper-button>
        <paper-button dialog-confirm autofocus on-tap="requestAddDistanceMetric" class="main-button">Apply</paper-button>
      </div>
    </paper-dialog>
    <div class="dashboard-layout">
      <div class="main-vertical">
        <div class="main-content">
          <div class="main-bottom-bar">
            <div class="datapoint-left-controls-holder">
              <paper-tabs class="tabs" noink selected="{{sideTabSelected}}">
                <paper-tab>Datapoint editor</paper-tab>
                <paper-tab>[[getPerformanceTabTitle(modelType, multiClass)]]</paper-tab>
                <paper-tab>Features</paper-tab>
              </paper-tabs>
            </div>
            <div class="datapoint-right-controls-holder">
              <a target="_blank" class="control" href="https://github.com/tensorflow/tensorboard/tree/master/tensorboard/plugins/interactive_inference/README.md" rel="noopener noreferrer">
                <paper-icon-button icon="help-outline" class="settings-button" title="What-If Tool documentation"></paper-icon-button>
              </a>
              <paper-icon-button icon="settings" on-tap="settingsClicked_" class="settings-button control" title="What-If Tool settings" disabled$="[[local]]"></paper-icon-button>
              <div class="example-status">[[exampleStatusStr]]</div>
            </div>
          </div>
          <iron-pages class="side-tabs" selected="{{sideTabSelected}}">
            <div class="datapoint-tab">
              <div class="side-holder" id="side">
                <div class="side-content">
                  <div class="heading-and-card">
                    <button class="heading" on-tap="toggleContextTools">
                      Visualize
                      <div class="right-side right-side-performance-tab">
                        <iron-icon icon="[[getExpandCollapseIcon(openedContextTools)]]" class="expand-collapse-button"></iron-icon>
                      </div>
                    </button>
                    <iron-collapse class="no-padding-card" id="collapsecontexttools" opened="{{openedContextTools}}">
                      <paper-radio-group selected="{{visMode}}">
                        <paper-radio-button name="dive">Datapoints</paper-radio-button>
                        <paper-radio-button name="pd">Partial dependence plots</paper-radio-button>
                      </paper-radio-group>
                      <div class="flex-wrap">
                        <div title="Select a datapoint to use this feature">
                          <paper-toggle-button class="counterfactual-toggle" checked="{{showNearestCounterfactual}}" disabled$="[[!hasSelected(selectedExampleAndInference)]]">
                            Show nearest counterfactual datapoint
                          </paper-toggle-button>
                        </div>
                        <paper-icon-button icon="info-outline" class="info-icon no-padding" on-tap="openDialog">
                        </paper-icon-button>
                        <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                          <div class="dialog-title">
                            Nearest counterfactual (neighbor of different
                            classification)
                          </div>
                          <div>
                            Compares the selected datapoint with its nearest
                            neighbor from a different classification using L1 or
                            L2 distance. If a custom distance function is set,
                            it uses that function instead.
                          </div>
                        </paper-dialog>
                        <paper-radio-group selected="{{nearestCounterfactualDist}}">
                          <paper-radio-button name="L1" disabled$="[[customDistanceFunctionSet]]">L1</paper-radio-button>
                          <paper-radio-button name="L2" disabled$="[[customDistanceFunctionSet]]">L2</paper-radio-button>
                          <paper-radio-button name="Custom" hidden$="[[!customDistanceFunctionSet]]">User-specified</paper-radio-button>
                        </paper-radio-group>
                        <template is="dom-if" if="[[isRegression_(modelType)]]">
                          <div title="Minimum distance in inferred value to consider counterfactual" class="counterfactual-delta">
                            <label>Threshold</label>
                            <paper-icon-button icon="info-outline" class="info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                              <div class="dialog-title">
                                Counterfactual threshold
                              </div>
                              <div>
                                For regression, a neighbor point is considered
                                as a different classification if the difference
                                in inferred value is equal or greater than the
                                selected threshold.<br>
                                The threshold is initialized to the standard
                                deviation of the inferred values.
                              </div>
                            </paper-dialog>
                            <paper-slider editable value="{{minCounterfactualValueDist}}" max="[[maxCounterfactualValueDist]]" disabled$="[[!showNearestCounterfactual]]"></paper-slider>
                          </div>
                        </template>
                        <paper-dropdown-menu label="Model:" no-label-float class="short-dropdown" hidden$="[[shouldHideModelSelector_(parsedModelNames)]]">
                          <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{nearestCounterfactualModelIndex}}">
                            <template is="dom-repeat" items="[[parsedModelNames]]">
                              <paper-item>[[getLabeledModelName_(item)]]</paper-item>
                            </template>
                          </paper-listbox>
                        </paper-dropdown-menu>
                      </div>
                      <div title="Select a datapoint to use this feature">
                        <div class="flex">
                          <paper-button class="control-button datapoint-button" disabled$="[[!hasSelected(selectedExampleAndInference)]]" on-tap="showDistanceClicked_" alt="Show similarity to selected datapoint" title="Show similarity to selected datapoint">
                            Show similarity to selected datapoint
                          </paper-button>
                          <paper-icon-button icon="info-outline" class="info-icon cf-info-icon no-padding" on-tap="openDialog">
                          </paper-icon-button>
                          <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                            <div class="dialog-title">
                              Show similarity to selected datapoint
                            </div>
                            <div>
                              Calculates the distance between the selected
                              datapoint and all other datapoints and shows this
                              in the datapoints visualization.
                            </div>
                          </paper-dialog>
                        </div>
                      </div>
                    </iron-collapse>
                  </div>
                  <div class="heading-and-card editor-heading-and-card">
                    <button class="heading">
                      [[getDatapointEditorTitle(selectedExampleNum,
                      comparedIndices)]]
                    </button>
                    <div class="no-padding-card">
                      <div class="datapoint-controls-holder datapoint-control-buttons-holder">
                        <div class="datapoint-left-controls-holder">
                          <paper-icon-button class="datapoint-control-button" icon="chevron-left" disabled$="[[!hasSelected(selectedExampleAndInference)]]" on-tap="selectPrevDatapoint_" alt="select previous datapoint" title="Select previous datapoint">
                          </paper-icon-button>
                          <paper-icon-button class="datapoint-control-button" icon="chevron-right" disabled$="[[!hasSelected(selectedExampleAndInference)]]" on-tap="selectNextDatapoint_" alt="select next datapoint" title="Select next datapoint">
                          </paper-icon-button>
                          <div title="Edit a datapoint to use this feature">
                            <paper-icon-button class="datapoint-control-button" icon="history" on-tap="resetDatapoint_" alt="undo changes" title="Undo changes" disabled$="[[shouldDisableReset_(selectedExampleAndInference.changed)]]">
                            </paper-icon-button>
                          </div>
                          <div title="Select a datapoint to use this feature">
                            <paper-icon-button class="datapoint-control-button" icon="content-copy" disabled$="[[!hasSelected(selectedExampleAndInference)]]" on-tap="copyDatapoint_" alt="duplicate datapoint" title="Duplicate datapoint">
                            </paper-icon-button>
                          </div>
                          <div title="Select a datapoint to use this feature">
                            <paper-icon-button class="datapoint-control-button" icon="delete" disabled$="[[!hasSelected(selectedExampleAndInference)]]" on-tap="deleteDatapointDialog_" alt="delete datapoint" title="Delete datapoint">
                            </paper-icon-button>
                          </div>
                          <div class="control-divider"></div>
                          <paper-input value="{{featureSearchValue}}" label="Search features" class="datapoint-control-filter-input feature-search-input" disabled$="[[!hasSelected(selectedExampleAndInference)]]" no-label-float>
                            <iron-icon icon="icons:search" slot="prefix"></iron-icon>
                          </paper-input>
                          <div class="flex" hidden="[[!hasAttributions_(attributions)]]">
                            <div class="control-divider"></div>
                            <paper-dropdown-menu label="Feature sort order" class="short-dropdown" no-label-float>
                              <paper-listbox slot="dropdown-content" selected="{{exampleFeatureSortOrder}}" attr-for-selected="name">
                                <paper-item name="alphabetical">Alphabetical</paper-item>
                                <paper-item name="attribution">Attributions</paper-item>
                                <paper-item name="reverse-attribution">Reverse attributions</paper-item>
                                <paper-item name="absolute-attribution">Absolute attributions</paper-item>
                              </paper-listbox>
                            </paper-dropdown-menu>
                            <svg id="attributionLegend"></svg>
                            <paper-dropdown-menu label="Model:" no-label-float class="short-dropdown" hidden$="[[!hasMultipleModelAttributions_(attributions)]]">
                              <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{attributionModelIndex}}">
                                <template is="dom-repeat" items="[[parsedModelNames]]">
                                  <paper-item>[[getLabeledModelName_(item)]]</paper-item>
                                </template>
                              </paper-listbox>
                            </paper-dropdown-menu>
                          </div>
                        </div>
                        <div class="datapoint-right-controls-holder"></div>
                      </div>
                      <template is="dom-if" if="[[hasSelected(selectedExampleAndInference)]]">
                        <div class="example-and-inference-holder">
                          <vz-example-viewer class="example-holder" json="{{selectedExampleAndInference.example}}" compare-json="{{counterfactualExampleAndInference.example}}" on-example-change="exampleChange_" id="viewer" display-mode="[[exampleDisplayMode]]" feature-search-value="{{featureSearchValue}}" compare-title="[[compareTitle]]" saliency="[[attribution]]" show-saliency readonly="[[!areExamplesEditable_(modelName, inferenceAddress)]]" sort-order="[[exampleFeatureSortOrder]]" min-sal="[[minAttribution]]" max-sal="[[maxAttribution]]" colors="[[attributionColorScale]]" highlight-differences="[[showNearestCounterfactual]]">
                          </vz-example-viewer>
                        </div>
                      </template>
                      <template is="dom-if" if="[[!hasSelected(selectedExampleAndInference)]]">
                        <div class="datapoint-info-holder">
                          <div class="datapoint-info-content">
                            <div class="flex space-between">
                              <div class="onboarding-header">
                                Select a datapoint to begin exploring model
                                behavior for your selection.
                              </div>
                            </div>
                            <div class="onboarding-text">
                              <span class="bold">Edit and Infer:</span>
                              Edit your datapoint here and run inference in the
                              Infer table to see differences in model behavior.
                            </div>
                            <div class="onboarding-text">
                              <span class="bold">Visualize:</span>
                              Switch between visualizing datapoints and
                              exploring partial dependence plots to gain
                              insights into your model's behavior. Explore
                              counterfactuals or see how similar (or different)
                              the rest of your dataset is from your selection.
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                  <div class="inference-section-holder">
                    <div class="inference-section">
                      <button class="inference-header heading" on-tap="toggleInferenceResults">
                        <div class="flex">
                          <div>
                            [[getInferTitle(selectedExampleNum,
                            comparedIndices)]]
                          </div>
                          <div class="right-side right-side-performance-tab">
                            <iron-icon icon="[[getExpandCollapseIcon(openedInferenceResults)]]" class="expand-collapse-button"></iron-icon>
                          </div>
                        </div>
                      </button>
                      <iron-collapse class="no-padding-card" id="collapseinference" opened="{{openedInferenceResults}}">
                        <div title="Edit a datapoint to use this feature">
                          <paper-button on-tap="inferClicked_" class="control-button infer-button flex-grow" disabled$="[[shouldDisableInferButton_(examplesAndInferences, modelName, inferenceAddress, updatedExample)]]">
                            Run inference
                          </paper-button>
                        </div>
                        <div class="flex">
                          <template is="dom-if" if="[[hasSelected(selectedExampleAndInference)]]">
                            <tf-inference-viewer class="inference-viewer" inferences="[[selectedExampleAndInference.inferences]]" id$="[[getInferenceHolderId_()]]" model-type="[[modelType]]" model-names="[[parsedModelNames]]" max-entries-per-run="[[maxInferenceEntriesPerRun]]">
                            </tf-inference-viewer>
                          </template>
                          <template is="dom-if" if="[[counterfactualExampleAndInference]]">
                            <tf-inference-viewer class="inference-viewer compare-inference-viewer" inferences="[[counterfactualExampleAndInference.inferences]]" model-type="[[modelType]]" model-names="[[parsedModelNames]]" max-entries-per-run="[[maxInferenceEntriesPerRun]]">
                            </tf-inference-viewer>
                          </template>
                        </div>
                      </iron-collapse>
                    </div>
                  </div>
                </div>
                <div class="resizer" id="resizer">
                  <iron-icon icon="av:pause" class="resize-icon"></iron-icon>
                </div>
              </div>
              <div class="center" slot="center" id="center">
                <facets-dive id="dive" data="[[visdata]]" selected-indices="[[selected]]" compared-indices="[[comparedIndices]]" on-selected-indices-changed="selectedIndicesChanged_" on-stats-changed="statsChanged_" hide-info-card="true" sprite-image-width="32" sprite-image-height="32" fit-grid-aspect-ratio-to-viewport="true" stable-colors="true">
                </facets-dive>
                <div id="noexamples" class="noexamples info-text">
                  Datapoints and their inference results will be displayed here.
                </div>
                <paper-progress indeterminate id="progress" hidden="[[loadingBarHidden_]]">
                </paper-progress>
                <div class="feature-container-holder" id="partialplotholder">
                  <div class="pd-plots-header">
                    <div class="flex">
                      <div class="pd-info-text">Partial Dependence Plots</div>
                      <paper-icon-button icon="info-outline" class="info-icon pd-info-icon no-padding" on-tap="openDialog">
                      </paper-icon-button>
                      <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                        <div class="dialog-title">Partial Dependence Plots</div>
                        <div>
                          Partial dependence plots visualize the change in
                          inference results for every feature, as the value for
                          that feature is changed to different valid values.
                        </div>
                        <div>
                          For numeric features, you can set the minimum and
                          maximum values to plot.
                        </div>
                        <div>
                          For string features, the most popular feature values
                          are shown as alternatives to the feature value for the
                          selected datapoint.
                        </div>
                        <div>
                          For features with multiple feature values per
                          datapoint, a single plot is shown for for each feature
                          value in the selected datapoint. You can override
                          which feature values have plots created for them by
                          specifying the indices to shown partial dependence
                          plots for, if the datapoint contains multiple feature
                          values for a feature.
                        </div>
                        <div>
                          When the global toggle is turned on, the plots show
                          the average effect of repeatedly changing a single
                          feature across all datapoints. When it is turned off,
                          the plots show the effect of a repeatedly changing a
                          single feature on the selected datapoint.
                        </div>
                      </paper-dialog>
                    </div>
                    <div class="button-and-progress-holder">
                      <paper-button class="control-button datapoint-button" disabled$="[[shouldDisableSortFeaturesButton(partialDepPlotEligibleFeatures, isSortingEligibleFeatures)]]" on-tap="sortPdFeatures_" alt="Sort features by interestingness" title="Sort features by interestingness">
                        Sort features by interestingness
                      </paper-button>
                      <paper-progress class="sort-progress" hidden="[[!isSortingEligibleFeatures]]" indeterminate></paper-progress>
                    </div>
                    <paper-toggle-button class="pd-toggle" checked="{{globalPdPlots}}" on-change="hideAllPdElements_" disabled$="[[!hasSelected(selectedExampleAndInference)]]">
                      Global partial dependence plots
                    </paper-toggle-button>
                  </div>
                  <template is="dom-if" if="[[!areTherePdPlotFeatures_(partialDepPlotEligibleFeatures)]]">
                    <div class="pd-no-features-text">
                      The loaded dataset has no features to show partial
                      dependence plots for.
                    </div>
                  </template>
                  <div class="pdplots-holder">
                    <template is="dom-repeat" items="[[partialDepPlotEligibleFeatures]]">
                      <div class="feature-container" data-feature-name$="[[item.name]]">
                        <div class$="[[getPerfTableEntryClass(item)]]">
                          <div class="perf-table-arrow">
                            <paper-icon-button class="pd-row-arrow rotated-icon" icon="arrow-drop-down" on-tap="categoryPaneClicked"></paper-icon-button>
                          </div>
                          <div class="perf-table-val perf-table-clickable tf-category-pane perf-table-text-entry" on-tap="categoryPaneClicked">
                            [[item.name]]
                          </div>
                        </div>
                        <div class="pd-entry-container perf-table-entry-expanded" hidden>
                          <div class="pd-input-container" hidden$="[[shouldHidePdInputContainer(item, selected)]]">
                            <div class="range-input-container" hidden$="[[item.samples]]">
                              <div class="info-text" title="The range of values to test (default values are automatically inferred).">
                                Set range of values to test
                              </div>
                              <div class="flex">
                                <input type="number" class="style-input x-min pd-range-control" value="[[item.observedMin]]" title="The minimum value to test (default value is automatically inferred)." on-input="pdInputChanged">
                                <div class="pd-range-hyphen">-</div>
                                <input type="number" class="style-input x-max pd-range-control" value="[[item.observedMax]]" title="The maximum value to test (default value is automatically inferred)." on-input="pdInputChanged">
                              </div>
                            </div>
                            <div class="feature-index-container" hidden$="[[shouldHideFeatureIndicesSelector(item.name, selected)]]" title="An optional printer-page-style pattern like '0,2,4-6' to select the indices of the feature values to generate plots for. Useful for features with many repeated fields.">
                              <div class="info-text">
                                Set feature indices <i>(optional)</i>
                              </div>
                              <input type="text" class="style-input feature-index-pattern pd-range-control" on-input="pdInputChanged">
                            </div>
                          </div>
                          <div class="tf-category-pane-content"></div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div class="config-tab">
              <div class="config-side-content">
                <div class="heading-and-card">
                  <button class="inference-header heading" on-tap="toggleTrueLabelSetup">
                    Configure
                    <div class="right-side right-side-performance-tab">
                      <iron-icon icon="[[getExpandCollapseIcon(openedTrueLabel)]]" class="expand-collapse-button"></iron-icon>
                    </div>
                  </button>
                  <iron-collapse class="card" id="collapsetruelabel" opened="{{openedTrueLabel}}">
                    <template is="dom-if" if="[[shouldShowLabelDropdown_(stats)]]">
                      <div class="flex">
                        <paper-dropdown-menu label="Ground Truth Feature" class="threshold-dropdown">
                          <paper-listbox slot="dropdown-content" selected="{{selectedLabelFeature}}" attr-for-selected="name">
                            <template is="dom-repeat" items="[[getFeatureList_(stats)]]">
                              <paper-item name="[[item]]">[[getFeatureName_(item)]]</paper-item>
                            </template>
                          </paper-listbox>
                        </paper-dropdown-menu>
                        <div>
                          <div class="help-title help-title-margin">
                            What is ground truth?
                          </div>
                          <div class="help-text">
                            <div>
                              The feature that your model is trying to predict.
                              <span class="dialog-link" on-tap="openDialog">More.
                              </span>
                              <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                                <div class="dialog-title">
                                  Ground Truth Feature
                                </div>
                                <div>
                                  If the datapoints contain a feature that
                                  represents the ground truth for what the model
                                  is attempting to predict, then selecting that
                                  feature here allows the tool to investigate
                                  the performance of the model by comparing the
                                  model's results to the ground truth feature.
                                </div>
                              </paper-dialog>
                            </div>
                          </div>
                        </div>
                      </div>
                      <template is="dom-if" if="[[shouldShowCostRatio_(selectedLabelFeature, modelType, multiClass)]]">
                        <div class="flex">
                          <paper-input value="{{incorrectPredCostRatio}}" label="Cost Ratio (FP/FN)" type="number" class="threshold-cost-input">
                          </paper-input>
                          <div>
                            <div class="help-title help-title-margin">
                              What is cost ratio?
                            </div>
                            <div class="help-text">
                              <div>
                                The cost of false positives relative to false
                                negatives. Required for optimization.
                                <span class="dialog-link" on-tap="openDialog">More.
                                </span>
                                <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                                  <div class="dialog-title">
                                    What is cost ratio?
                                  </div>
                                  <div>
                                    This tells the tool how to optimize the
                                    classification thresholds when you use the
                                    optimization strategy controls.
                                  </div>
                                  <div>
                                    1.00 = false positives are equally as costly
                                    as false negatives.
                                  </div>
                                  <div>
                                    4.00 = false positives are 4 times more
                                    costly than false negatives
                                  </div>
                                  <div>
                                    0.25 = false negatives are 4 times more
                                    costly than false positives.
                                  </div>
                                </paper-dialog>
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                      <template is="dom-if" if="[[shouldShowFeatureDropdown_(stats)]]">
                        <div class="flex">
                          <paper-dropdown-menu label="Slice by" class="threshold-dropdown">
                            <paper-listbox slot="dropdown-content" selected="{{selectedBreakdownFeature}}" attr-for-selected="name">
                              <template is="dom-repeat" items="[[getFeatureList_(stats)]]">
                                <paper-item name="[[item]]">[[getFeatureName_(item)]]</paper-item>
                              </template>
                            </paper-listbox>
                          </paper-dropdown-menu>
                          <template is="dom-if" if="[[isNumericFeature_(selectedBreakdownFeature)]]">
                            <paper-input min="2" value="{{numPrimaryBuckets}}" label="Buckets" type="number" class="num-buckets-input"></paper-input>
                          </template>
                          <div>
                            <div class="help-title help-title-margin">
                              What does slicing do?
                            </div>
                            <div class="help-text">
                              <div>
                                Shows performance for each value of the selected
                                feature.
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="flex">
                          <template is="dom-if" if="[[shouldShowSecondFeatureDropdown_(selectedBreakdownFeature)]]">
                            <paper-dropdown-menu label="Slice by (secondary)" class="threshold-dropdown">
                              <paper-listbox slot="dropdown-content" selected="{{selectedSecondBreakdownFeature}}" attr-for-selected="name">
                                <template is="dom-repeat" items="[[getFeatureList_(stats)]]">
                                  <paper-item name="[[item]]">[[getFeatureName_(item)]]</paper-item>
                                </template>
                              </paper-listbox>
                            </paper-dropdown-menu>
                            <template is="dom-if" if="[[isNumericFeature_(selectedSecondBreakdownFeature)]]">
                              <paper-input min="2" value="{{numSecondaryBuckets}}" label="Buckets" type="number" class="num-buckets-input"></paper-input>
                            </template>
                          </template>
                        </div>
                      </template>
                    </template>
                  </iron-collapse>
                </div>
                <template is="dom-if" if="[[isBinaryClassification_(modelType, multiClass)]]">
                  <div class="heading-and-card">
                    <button class="inference-header heading" on-tap="toggleExplorerSetup">
                      Fairness
                      <div class="right-side right-side-performance-tab">
                        <iron-icon icon="[[getExpandCollapseIcon(openedExplorer)]]" class="expand-collapse-button"></iron-icon>
                      </div>
                    </button>
                    <iron-collapse class="card" id="collapseexplorer" opened="{{openedExplorer}}">
                      <template is="dom-if" if="[[shouldShowFeatureDropdown_(stats)]]">
                        <div class="control-info-header help-title-margin-button">
                          Apply an optimization strategy
                        </div>
                        <div class="control-info-text">
                          Select a strategy to set classification thresholds
                          based on the set cost ratio and data slices. Manually
                          altering thresholds or changing cost ratio will
                          default back to custom thresholds.
                        </div>
                        <paper-radio-group class="optimization-radio-group" selected="{{optimizationSelected}}">
                          <paper-radio-button name="custom" class="optimization-radio" id="customthresh">Custom thresholds
                            <paper-icon-button icon="info-outline" class="info-icon thresh-info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="bottom">
                              <div class="dialog-title">Custom thresholds</div>
                              <div>
                                Set your own thresholds using the threshold
                                sliders.
                              </div>
                            </paper-dialog>
                          </paper-radio-button>
                          <paper-radio-button name="unaware" class="optimization-radio">Single threshold
                            <paper-icon-button icon="info-outline" class="info-icon thresh-info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="bottom">
                              <div class="dialog-title">Single threshold</div>
                              <div>
                                Optimize a single threshold for all datapoints
                                based on the specified cost ratio.
                              </div>
                            </paper-dialog>
                          </paper-radio-button>
                          <paper-radio-button name="demoparity" class="optimization-radio" disabled$="[[!shouldShowFeaturePerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">Demographic parity
                            <paper-icon-button icon="info-outline" class="info-icon thresh-info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="bottom">
                              <div class="dialog-title">Demographic parity</div>
                              <div>
                                Optimize a threshold per slice based on the
                                specified cost ratio, ensuring the different
                                slices achieve demographic party.
                              </div>
                              <div>
                                Demographic parity means that similar
                                percentages of datapoints from each slice are
                                predicted as positive classifications.
                              </div>
                            </paper-dialog>
                          </paper-radio-button>
                          <paper-radio-button name="equalopp" class="optimization-radio" disabled$="[[!shouldShowFeaturePerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">Equal opportunity
                            <paper-icon-button icon="info-outline" class="info-icon thresh-info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="bottom">
                              <div class="dialog-title">Equal opportunity</div>
                              <div>
                                Optimize a threshold per slice based on the
                                specified cost ratio, ensuring the different
                                slices achieve equal opportunity.
                              </div>
                              <div>
                                Equal opportunity means that among those
                                datapoints with the positive ground truth label,
                                there is a similar percentage of positive
                                predictions in each slice.
                              </div>
                            </paper-dialog>
                          </paper-radio-button>
                          <paper-radio-button name="equalacc" class="optimization-radio" disabled$="[[!shouldShowFeaturePerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">Equal accuracy
                            <paper-icon-button icon="info-outline" class="info-icon thresh-info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="bottom">
                              <div class="dialog-title">Equal accuracy</div>
                              <div>
                                Optimize a threshold per slice based on the
                                specified cost ratio, ensuring the different
                                slices achieve equal accuracy.
                              </div>
                              <div>
                                Equal accuracy means that there is a similar
                                percentage of correct predictions in each slice.
                              </div>
                            </paper-dialog>
                          </paper-radio-button>
                          <paper-radio-button name="group" class="optimization-radio" disabled$="[[!shouldShowFeaturePerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">Group thresholds
                            <paper-icon-button icon="info-outline" class="info-icon thresh-info-icon no-padding" on-tap="openDialog">
                            </paper-icon-button>
                            <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="bottom">
                              <div class="dialog-title">Group thresholds</div>
                              <div>
                                Optimize a separate threshold for each slice
                                based on the specified cost ratio.
                              </div>
                            </paper-dialog>
                          </paper-radio-button>
                        </paper-radio-group>
                      </template>
                    </iron-collapse>
                  </div>
                </template>
              </div>
              <div class="config-main-content">
                <template is="dom-if" if="[[isBinaryClassification_(modelType, multiClass)]]" restamp>
                  <div class="perf-table-title-row">
                    <div class="flex">
                      <div class="perf-table-title">
                        [[getPerfTableTitle(selectedBreakdownFeature,
                        selectedSecondBreakdownFeature, optimizationSelected,
                        featureValueThresholds)]]
                      </div>
                      <paper-icon-button icon="info-outline" class="info-icon performance-info-icon no-padding" on-tap="openDialog">
                      </paper-icon-button>
                      <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                        <div class="dialog-title">
                          Classification Performance Table
                        </div>
                        <div>
                          Set the ground truth feature to explore model
                          performance including ROC curves and confusion
                          matrices.
                        </div>
                        <div>
                          Slice the dataset by features and explore model
                          performance by slice.
                        </div>
                        <div>
                          Use the fairness optimization strategies and see the
                          impact on the thresholds and performance of the
                          individual slices.
                        </div>
                      </paper-dialog>
                    </div>
                    <div class="perf-sort-box">
                      <div>
                        <paper-icon-button icon="unfold-more" class="perf-button" on-tap="expandAllPerformance" alt="expand all slices" title="Expand all slices">
                        </paper-icon-button>
                        <paper-icon-button icon="unfold-less" class="perf-button" on-tap="collapseAllPerformance" alt="collapse all slices" title="Collapse all slices">
                        </paper-icon-button>
                      </div>
                      <paper-dropdown-menu label="Sort by" class="threshold-dropdown perf-table-sort-menu">
                        <paper-listbox slot="dropdown-content" selected="{{selectedFeatureSort}}" attr-for-selected="name">
                          <template is="dom-repeat" items="[[getFeatureSortBy(modelType, multiClass)]]">
                            <paper-item name="[[item]]">[[item]]</paper-item>
                          </template>
                        </paper-listbox>
                      </paper-dropdown-menu>
                    </div>
                  </div>
                  <div class="perf-table-header">
                    <div class="perf-table-arrow">
                      <iron-icon class="expand-collapse-button"></iron-icon>
                    </div>
                    <div class="perf-table-val">Feature Value</div>
                    <div class="perf-table-count">Count</div>
                    <div class$="[[getPerfTableModelClass(numModels)]]">
                      Model
                    </div>
                    <div class="perf-table-threshold flex">
                      <div>Threshold</div>
                      <div class="threshold-info-holder">
                        <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                        </paper-icon-button>
                        <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                          <div class="dialog-title">
                            Exploring Classification Performance
                          </div>
                          <div>
                            Use this slider to adjust the classification
                            threshold for this slice. Inference values at or
                            above this threshold are considered a positive
                            classification, while inference values below this
                            threshold are considered a negative classification.
                          </div>
                        </paper-dialog>
                      </div>
                    </div>
                    <div class="perf-table-fp">False Positives (%)</div>
                    <div class="perf-table-fn">False Negatives (%)</div>
                    <div class="perf-table-acc">Accuracy (%)</div>
                    <div class="perf-table-f1">F1</div>
                  </div>
                  <div class="perf-table-entries-holder">
                    <template is="dom-repeat" items="[[featureValueThresholds]]" as="featureValueThreshold">
                      <div class="perf-table-entry">
                        <div class$="[[getPerfTableRowClass(featureValueThreshold.opened)]]" data-index$="[[index]]">
                          <div class="perf-table-arrow">
                            <paper-icon-button class$="[[getExpandCollapsePerfIconClass(featureValueThreshold.opened)]]" icon="arrow-drop-down" on-tap="togglePerfRow"></paper-icon-button>
                          </div>
                          <div class="perf-table-val perf-table-clickable perf-table-text-entry" on-tap="togglePerfRow">
                            [[getPrintableValue_(featureValueThreshold)]]
                          </div>
                          <div class="perf-table-count perf-table-clickable perf-table-num-entry" on-tap="togglePerfRow">
                            [[getFeatureValueCount(inferenceStats_,
                            featureValueThreshold.threshold,
                            featureValueThreshold)]]
                          </div>
                          <div class$="[[getPerfTableModelClass(numModels)]]" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-text-entry perf-table-clickable">
                                [[getModelName_(index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-threshold">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <paper-slider class$="[[getSliderClass(index)]]" editable="true" min="0" max="1" step="0.01" immediate-value="{{item.threshold}}" value="[[item.threshold]]" on-value-changed="refreshInferencesNoRegen_" on-immediate-value-changed="refreshInferencesNoRegen_" on-down="resetOptimizationSelected_">
                              </paper-slider>
                            </template>
                          </div>
                          <div class="perf-table-fp perf-table-clickable" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-num-entry">
                                [[getFPModelIndex(inferenceStats_,
                                featureValueThreshold.threshold, index,
                                featureValueThreshold)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-fn perf-table-clickable" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-num-entry">
                                [[getFNModelIndex(inferenceStats_,
                                featureValueThreshold.threshold, index,
                                featureValueThreshold)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-acc perf-table-clickable" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-num-entry">
                                [[getAccuracyModelIndex(inferenceStats_,
                                featureValueThreshold.threshold, index,
                                featureValueThreshold)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-f1 perf-table-clickable" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-num-entry">
                                [[getF1ModelIndex(inferenceStats_,
                                featureValueThreshold.threshold, index,
                                featureValueThreshold)]]
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <iron-collapse opened="{{featureValueThreshold.opened}}">
                        <div class="perf-table-entry-expanded flex-row-reverse">
                          <template is="dom-if" if="[[shouldShowFeaturePerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">
                            <div class="perfs-holder">
                              <div class="perf-holder">
                                <div class="perf-curve-text">
                                  ROC curve
                                  <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                  </paper-icon-button>
                                  <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                    <div class="dialog-title">ROC curve</div>
                                    <div>
                                      A receiver operating characteristic (ROC)
                                      curve plots the true positive rate (TPR)
                                      against the false positive rate (FPR) at
                                      various classification thresholds.
                                    </div>
                                  </paper-dialog>
                                </div>
                                <div class="perf-curve-x-label">
                                  False positive rate
                                </div>
                                <div class="perf-curve-y-label">
                                  True positive rate
                                </div>
                                <vz-line-chart2 id="[[getRocChartId(index)]]" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                                </vz-line-chart2>
                              </div>
                              <div class="perf-holder">
                                <div class="perf-curve-text">
                                  PR curve
                                  <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                  </paper-icon-button>
                                  <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                    <div class="dialog-title">PR curve</div>
                                    <div>
                                      A precision-recall (PR) curve plots
                                      precision against recall at various
                                      classification thresholds.
                                    </div>
                                  </paper-dialog>
                                </div>
                                <div class="perf-curve-x-label">Recall</div>
                                <div class="perf-curve-y-label">Precision</div>
                                <vz-line-chart2 id="[[getPrChartId(index)]]" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                                </vz-line-chart2>
                              </div>
                              <div class="perf-holder">
                                <div class="conf-text">Confusion matrix</div>
                                <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                                  <tf-confusion-matrix counts="[[getConfusionCountsModelIndex(inferenceStats_, featureValueThreshold.threshold, index, featureValueThreshold)]]" label="[[getConfusionMatrixLabel(index, numModels)]]" background="[[getConfusionMatrixColor(index)]]" all-items="[[allConfMatrixLabels]]">
                                  </tf-confusion-matrix>
                                </template>
                              </div>
                            </div>
                          </template>
                        </div>
                      </iron-collapse>
                    </template>
                    <template is="dom-if" if="[[shouldShowOverallThresholder_(selectedBreakdownFeature)]]">
                      <div class="perf-table-entry">
                        <div class="perf-table-row-expanded">
                          <div class="perf-table-arrow">
                            <paper-icon-button icon="arrow-drop-down" on-tap="togglePerfRow" disabled></paper-icon-button>
                          </div>
                          <div class="perf-table-val perf-table-text-entry">
                            All datapoints
                          </div>
                          <div class="perf-table-count perf-table-num-entry">
                            [[getFeatureValueCount(inferenceStats_,
                            overallThresholds)]]
                          </div>
                          <div class$="[[getPerfTableModelClass(numModels)]]">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <div class="perf-table-text-entry">
                                [[getModelName_(index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-threshold">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <paper-slider class$="[[getSliderClass(index)]]" editable="true" min="0" max="1" step="0.01" immediate-value="{{item.threshold}}" value="[[item.threshold]]" on-value-changed="refreshInferencesNoRegen_" on-immediate-value-changed="refreshInferencesNoRegen_" on-down="resetOptimizationSelected_">
                              </paper-slider>
                            </template>
                          </div>
                          <div class="perf-table-fp">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <div class="perf-table-num-entry">
                                [[getFPModelIndex(inferenceStats_,
                                overallThresholds, index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-fn">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <div class="perf-table-num-entry">
                                [[getFNModelIndex(inferenceStats_,
                                overallThresholds, index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-acc">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <div class="perf-table-num-entry">
                                [[getAccuracyModelIndex(inferenceStats_,
                                overallThresholds, index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-f1">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <div class="perf-table-num-entry">
                                [[getF1ModelIndex(inferenceStats_,
                                overallThresholds, index)]]
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <div class="perf-table-entry-expanded flex-row-reverse">
                        <template is="dom-if" if="[[shouldShowOverallPerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">
                          <div class="perfs-holder">
                            <div class="perf-holder">
                              <div class="perf-curve-text">
                                ROC curve
                                <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                </paper-icon-button>
                                <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                  <div class="dialog-title">ROC curve</div>
                                  <div>
                                    A receiver operating characteristic (ROC)
                                    curve plots the true positive rate (TPR)
                                    against the false positive rate (FPR) at
                                    various classification thresholds.
                                  </div>
                                </paper-dialog>
                              </div>
                              <div class="perf-curve-x-label">
                                False positive rate
                              </div>
                              <div class="perf-curve-y-label">
                                True positive rate
                              </div>
                              <vz-line-chart2 id="rocchart" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                              </vz-line-chart2>
                            </div>
                            <div class="perf-holder">
                              <div class="perf-curve-text">
                                PR curve
                                <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                </paper-icon-button>
                                <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                  <div class="dialog-title">PR curve</div>
                                  <div>
                                    A precision-recall (PR) curve plots
                                    precision against recall at various
                                    classification thresholds.
                                  </div>
                                </paper-dialog>
                              </div>
                              <div class="perf-curve-x-label">Recall</div>
                              <div class="perf-curve-y-label">Precision</div>
                              <vz-line-chart2 id="prchart" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                              </vz-line-chart2>
                            </div>
                            <div class="perf-holder">
                              <div class="conf-text">Confusion matrix</div>
                              <template is="dom-repeat" items="{{overallThresholds}}">
                                <tf-confusion-matrix counts="[[getConfusionCountsModelIndex(inferenceStats_, overallThresholds, index)]]" label="[[getConfusionMatrixLabel(index, numModels)]]" background="[[getConfusionMatrixColor(index)]]" all-items="[[allConfMatrixLabels]]">
                                </tf-confusion-matrix>
                              </template>
                            </div>
                          </div>
                        </template>
                      </div>
                    </template>
                  </div>
                </template>
                <template is="dom-if" if="[[isMultiClass_(modelType, multiClass)]]" restamp>
                  <div class="perf-table-title-row">
                    <div class="flex">
                      <div class="perf-table-title">
                        [[getNoThresholdPerfTableTitle(selectedBreakdownFeature,
                        selectedSecondBreakdownFeature,
                        featureValueThresholds)]]
                      </div>
                      <paper-icon-button icon="info-outline" class="info-icon performance-info-icon no-padding" on-tap="openDialog">
                      </paper-icon-button>
                      <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                        <div class="dialog-title">
                          Classification Performance Table
                        </div>
                        <div>
                          Set the ground truth feature to explore model
                          performance including confusion matrices.
                        </div>
                        <div>
                          Slice the dataset and explore model performance by
                          slice.
                        </div>
                      </paper-dialog>
                    </div>
                    <div class="perf-sort-box">
                      <div>
                        <paper-icon-button icon="unfold-more" class="perf-button" on-tap="expandAllPerformance" alt="expand all slices" title="Expand all slices">
                        </paper-icon-button>
                        <paper-icon-button icon="unfold-less" class="perf-button" on-tap="collapseAllPerformance" alt="collapse all slices" title="Collapse all slices">
                        </paper-icon-button>
                      </div>
                      <paper-dropdown-menu label="Sort by" class="threshold-dropdown perf-table-sort-menu">
                        <paper-listbox slot="dropdown-content" selected="{{selectedFeatureSort}}" attr-for-selected="name">
                          <template is="dom-repeat" items="[[getFeatureSortBy(modelType, multiClass)]]">
                            <paper-item name="[[item]]">[[item]]</paper-item>
                          </template>
                        </paper-listbox>
                      </paper-dropdown-menu>
                    </div>
                  </div>
                  <div class="perf-table-header">
                    <div class="perf-table-arrow"></div>
                    <div class="perf-table-val">Feature Value</div>
                    <div class="perf-table-count">Count</div>
                    <div class$="[[getPerfTableModelClass(numModels)]]">
                      Model
                    </div>
                    <div class="perf-table-acc">Accuracy</div>
                  </div>
                  <div class="perf-table-entries-holder">
                    <template is="dom-repeat" items="[[featureValueThresholds]]" as="featureValueThreshold">
                      <div class="perf-table-entry">
                        <div class$="[[getPerfTableRowClass(featureValueThreshold.opened)]]" data-index$="[[index]]">
                          <div class="perf-table-arrow">
                            <paper-icon-button class$="[[getExpandCollapsePerfIconClass(featureValueThreshold.opened)]]" icon="arrow-drop-down" on-tap="togglePerfRow"></paper-icon-button>
                          </div>
                          <div class="perf-table-val perf-table-clickable perf-table-text-entry" on-tap="togglePerfRow">
                            [[getPrintableValue_(featureValueThreshold)]]
                          </div>
                          <div class="perf-table-count perf-table-num-entry perf-table-clickable perf-table-text-entry" on-tap="togglePerfRow">
                            [[getMultiClassFeatureValueCount(inferenceStats_,
                            featureValueThreshold)]]
                          </div>
                          <div class$="[[getPerfTableModelClass(numModels)]]" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-text-entry perf-table-clickable">
                                [[getModelName_(index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-acc perf-table-clickable" on-tap="togglePerfRow">
                            <template is="dom-repeat" items="{{featureValueThreshold.threshold}}">
                              <div class="perf-table-text-entry perf-table-num-entry">
                                [[getMultiClassAccuracyModelIndex(inferenceStats_,
                                index, featureValueThreshold)]]
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <iron-collapse opened="{{featureValueThreshold.opened}}">
                        <div class="perf-table-entry-expanded flex-row-reverse scroll-x">
                          <template is="dom-if" if="[[shouldShowFeaturePerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">
                            <div class="perfs-holder">
                              <div class="perf-holder">
                                <div class="conf-text">Confusion matrix</div>
                                <template is="dom-repeat" items="[[inferenceStats_]]" as="inferenceStat">
                                  <tf-confusion-matrix counts="[[getMultiClassConfMatrix(inferenceStats_, index, featureValueThreshold)]]" label="[[getConfusionMatrixLabel(index, numModels)]]" background="[[getConfusionMatrixColor(index)]]" all-items="[[allConfMatrixLabels]]">
                                  </tf-confusion-matrix>
                                </template>
                              </div>
                            </div>
                            <template is="dom-repeat" items="[[allConfMatrixLabels]]" as="label" index-as="labelInd">
                              <div class="perfs-holder">
                                <div class="perf-holder">
                                  <div class="perf-curve-text">
                                    ROC curve for [[getLabel(labelInd)]]
                                    <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                    </paper-icon-button>
                                    <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                      <div class="dialog-title">
                                        ROC curve
                                      </div>
                                      <div>
                                        A receiver operating characteristic
                                        (ROC) curve plots the true positive rate
                                        (TPR) against the false positive rate
                                        (FPR) at various classification
                                        thresholds.
                                      </div>
                                      <div>
                                        For this multi-class classification
                                        problem, we plot one ROC curve for each
                                        class, at each time considering the
                                        class in question as the positive one
                                        and all the others as negatives (<i>i.e.</i>
                                        <i>binarized</i> versions of the
                                        problem).
                                      </div>
                                    </paper-dialog>
                                  </div>
                                  <div class="perf-curve-x-label">
                                    False positive rate
                                  </div>
                                  <div class="perf-curve-y-label">
                                    True positive rate
                                  </div>
                                  <vz-line-chart2 id="[[getRocChartLabelId(labelInd, index)]]" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                                  </vz-line-chart2>
                                </div>
                                <div class="perf-holder">
                                  <div class="perf-curve-text">
                                    PR curve for [[getLabel(labelInd)]]
                                    <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                    </paper-icon-button>
                                    <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                      <div class="dialog-title">PR curve</div>
                                      <div>
                                        A precision-recall (PR) curve plots
                                        precision against recall at various
                                        classification thresholds.
                                      </div>
                                      <div>
                                        For this multi-class classification
                                        problem, we plot one PR curve for each
                                        class, at each time considering the
                                        class in question as the positive one
                                        and all the others as negatives (<i>i.e.</i>
                                        <i>binarized</i> versions of the
                                        problem).
                                      </div>
                                    </paper-dialog>
                                  </div>
                                  <div class="perf-curve-x-label">Recall</div>
                                  <div class="perf-curve-y-label">
                                    Precision
                                  </div>
                                  <vz-line-chart2 id="[[getPrChartLabelId(labelInd, index)]]" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                                  </vz-line-chart2>
                                </div>
                              </div>
                            </template>
                          </template>
                        </div>
                      </iron-collapse>
                    </template>
                    <template is="dom-if" if="[[shouldShowOverallThresholder_(selectedBreakdownFeature)]]">
                      <div class="perf-table-entry">
                        <div class="perf-table-row-expanded">
                          <div class="perf-table-arrow">
                            <paper-icon-button icon="arrow-drop-down" on-tap="togglePerfRow" disabled></paper-icon-button>
                          </div>
                          <div class="perf-table-val perf-table-text-entry">
                            All datapoints
                          </div>
                          <div class="perf-table-count perf-table-num-entry">
                            [[getMultiClassFeatureValueCount(inferenceStats_)]]
                          </div>
                          <div class$="[[getPerfTableModelClass(numModels)]]">
                            <template is="dom-repeat" items="{{overallThresholds}}">
                              <div class="perf-table-text-entry">
                                [[getModelName_(index)]]
                              </div>
                            </template>
                          </div>
                          <div class="perf-table-acc">
                            <template is="dom-repeat" items="[[inferenceStats_]]" as="inferenceStat">
                              <div class="perf-table-text-entry perf-table-num-entry">
                                [[getMultiClassAccuracyModelIndex(inferenceStats_,
                                index)]]
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <div class="perf-table-entry-expanded flex-row-reverse scroll-x">
                        <template is="dom-if" if="[[shouldShowOverallPerfCharts_(selectedLabelFeature, selectedBreakdownFeature, inferences)]]">
                          <div class="perfs-holder">
                            <div class="perf-holder">
                              <div class="conf-text">Confusion matrix</div>
                              <template is="dom-repeat" items="[[inferenceStats_]]" as="inferenceStat">
                                <tf-confusion-matrix counts="[[getMultiClassConfMatrix(inferenceStats_, index)]]" label="[[getConfusionMatrixLabel(index, numModels)]]" background="[[getConfusionMatrixColor(index)]]" all-items="[[allConfMatrixLabels]]">
                                </tf-confusion-matrix>
                              </template>
                            </div>
                          </div>
                          <template is="dom-repeat" items="[[allConfMatrixLabels]]" as="label" index-as="labelInd">
                            <div class="perfs-holder">
                              <div class="perf-holder">
                                <div class="perf-curve-text">
                                  ROC curve for [[getLabel(labelInd)]]
                                  <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                  </paper-icon-button>
                                  <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                    <div class="dialog-title">ROC curve</div>
                                    <div>
                                      A receiver operating characteristic (ROC)
                                      curve plots the true positive rate (TPR)
                                      against the false positive rate (FPR) at
                                      various classification thresholds.
                                    </div>
                                    <div>
                                      For this multi-class classification
                                      problem, we plot one ROC curve for each
                                      class, at each time considering the class
                                      in question as the positive one and all
                                      the others as negatives (<i>i.e.</i>
                                      <i>binarized</i> versions of the problem).
                                    </div>
                                  </paper-dialog>
                                </div>
                                <div class="perf-curve-x-label">
                                  False positive rate
                                </div>
                                <div class="perf-curve-y-label">
                                  True positive rate
                                </div>
                                <vz-line-chart2 id="[[getRocChartLabelId(label, '')]]" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                                </vz-line-chart2>
                              </div>
                              <div class="perf-holder">
                                <div class="perf-curve-text">
                                  PR curve for [[getLabel(labelInd)]]
                                  <paper-icon-button icon="info-outline" class="info-icon threshold-info-icon no-padding" on-tap="openDialog">
                                  </paper-icon-button>
                                  <paper-dialog class="dialog-text" horizontal-align="right" vertical-align="bottom">
                                    <div class="dialog-title">PR curve</div>
                                    <div>
                                      A precision-recall (PR) curve plots
                                      precision against recall at various
                                      classification thresholds.
                                    </div>
                                    <div>
                                      For this multi-class classification
                                      problem, we plot one PR curve for each
                                      class, at each time considering the class
                                      in question as the positive one and all
                                      the others as negatives (<i>i.e.</i>
                                      <i>binarized</i> versions of the problem).
                                    </div>
                                  </paper-dialog>
                                </div>
                                <div class="perf-curve-x-label">Recall</div>
                                <div class="perf-curve-y-label">Precision</div>
                                <vz-line-chart2 id="[[getPrChartLabelId(label, '')]]" x-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]" y-axis-formatter="[[getSimpleAxisFormatter(axisPrecision)]]">
                                </vz-line-chart2>
                              </div>
                            </div>
                          </template>
                        </template>
                      </div>
                    </template>
                  </div>
                </template>
                <template is="dom-if" if="[[isRegression_(modelType)]]" restamp>
                  <div class="perf-table-title-row">
                    <div class="flex">
                      <div class="perf-table-title">
                        [[getNoThresholdPerfTableTitle(selectedBreakdownFeature,
                        selectedSecondBreakdownFeature,
                        featureValueThresholds)]]
                      </div>
                      <paper-icon-button icon="info-outline" class="info-icon performance-info-icon no-padding" on-tap="openDialog">
                      </paper-icon-button>
                      <paper-dialog class="dialog-text" horizontal-align="auto" vertical-align="auto">
                        <div class="dialog-title">
                          Regression Performance Table
                        </div>
                        <div>
                          Set the ground truth feature to explore model
                          performance.
                        </div>
                        <div>
                          Slice the dataset and explore model performance by
                          slice.
                        </div>
                      </paper-dialog>
                    </div>
                    <paper-dropdown-menu label="Sort by" class="threshold-dropdown perf-table-sort-menu">
                      <paper-listbox slot="dropdown-content" selected="{{selectedFeatureSort}}" attr-for-selected="name">
                        <template is="dom-repeat" items="[[getFeatureSortBy(modelType, multiClass)]]">
                          <paper-item name="[[item]]">[[item]]</paper-item>
                        </template>
                      </paper-listbox>
                    </paper-dropdown-menu>
                  </div>
                  <div class="perf-table-header">
                    <div class="perf-table-arrow"></div>
                    <div class="perf-table-val">Feature Value</div>
                    <div class="perf-table-count">Count</div>
                    <div class="perf-table-error">Mean error</div>
                    <div class="perf-table-error">Median error</div>
                    <div class="perf-table-error">Mean absolute error</div>
                    <div class="perf-table-error">Median absolute error</div>
                    <div class="perf-table-sq-error">Mean squared error</div>
                    <div class="perf-table-sq-error">Median squared error</div>
                  </div>
                  <div class="perf-table-entries-holder">
                    <template is="dom-repeat" items="[[regressionEntries_]]">
                      <div class="perf-table-entry">
                        <div class="perf-table-row">
                          <div class="perf-table-arrow"></div>
                          <div class="perf-table-val perf-table-text-entry">
                            [[item.name]]
                          </div>
                          <div class="perf-table-count perf-table-num-entry perf-table-text-entry">
                            [[item.count]]
                          </div>
                          <div class="perf-table-error perf-table-num-entry perf-table-text-entry">
                            [[formatError(item.meanError)]]
                          </div>
                          <div class="perf-table-error perf-table-num-entry perf-table-text-entry">
                            [[formatError(item.medianError)]]
                          </div>
                          <div class="perf-table-error perf-table-num-entry perf-table-text-entry">
                            [[formatError(item.meanAbsError)]]
                          </div>
                          <div class="perf-table-sq-error perf-table-num-entry perf-table-text-entry">
                            [[formatError(item.medianAbsError)]]
                          </div>
                          <div class="perf-table-error perf-table-num-entry perf-table-text-entry">
                            [[formatError(item.meanSquaredError)]]
                          </div>
                          <div class="perf-table-sq-error perf-table-num-entry perf-table-text-entry">
                            [[formatError(item.medianSquaredError)]]
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </div>
            <div class="stats-tab">
              <facets-overview id="overview" search-string="{{featureSearchValue}}"></facets-overview>
            </div>
          </iron-pages>
        </div>
      </div>
    </div>
    <style include="dashboard-style"></style>
  </template>

  
</dom-module>




















<dom-module id="vaadin-split-layout">
  <template>
    <style>
      :host {
        display: flex;
        overflow: hidden !important;
        transform: translateZ(0);
      }

      :host([vertical]) {
        flex-direction: column;
      }

      :host ::slotted(*) {
        flex: 1 1 auto;
        overflow: auto;
      }

      :host > #splitter {
        flex: none;
        position: relative;
        z-index: 1;
        overflow: visible;
        min-width: 8px;
        min-height: 8px;
        background: var(--divider-color, #ccc);
        fill: var(--primary-background-color, #fff);
        @apply --vaadin-split-layout-splitter;
      }

      :host(:not([vertical])) > #splitter {
        cursor: ew-resize;
      }

      :host([vertical]) > #splitter {
        cursor: ns-resize;
      }

      #handle,
      #splitter ::slotted([slot=handle]) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      :host([vertical]) > #splitter #handle {
        transform: translate(-50%, -50%) rotate(90deg);
      }
    </style>
    <slot id="primary" name="primary"></slot>
    <div id="splitter" on-track="_onHandleTrack" on-down="_preventDefault">
      <slot name="handle">
        <svg id="handle" width="40" height="40">
          <rect x="19" y="8" width="2" height="24"></rect>
        </svg>
      </slot>
    </div>
    <slot id="secondary" name="secondary"></slot>
  </template>

  
</dom-module>




<dom-module id="tf-hparams-query-pane">
  <template>
    <div class="pane">
      <vaadin-split-layout vertical>
        <vaadin-split-layout vertical id="hyperparameters-metrics-statuses">
          <vaadin-split-layout vertical id="hyperparameters-metrics">
            <div class="section hyperparameters">
              <div class="section-title">Hyperparameters</div>
              <template is="dom-repeat" items="{{_hparams}}" as="hparam">
                <div class="hparam">
                  <paper-checkbox checked="{{hparam.displayed}}" class="hparam-checkbox">
                    [[_hparamName(hparam.info)]]
                  </paper-checkbox>
                  
                  
                  <template is="dom-if" if="[[hparam.filter.domainDiscrete]]">
                    <template is="dom-repeat" items="[[hparam.filter.domainDiscrete]]">
                      <paper-checkbox checked="{{item.checked}}" class="discrete-value-checkbox" on-change="_queryServer">
                        [[_prettyPrint(item.value)]]
                      </paper-checkbox>
                    </template>
                  </template>
                  
                  <template is="dom-if" if="[[hparam.filter.interval]]">
                    <paper-input label="Min" value="{{hparam.filter.interval.min.value}}" allowed_pattern="[0-9.e\-]" on-value-changed="_queryServer" error-message="Invalid input" invalid="[[hparam.filter.interval.min.invalid]]" placeholder="-infinity">
                    </paper-input>
                    <paper-input label="Max" value="{{hparam.filter.interval.max.value}}" allowed_pattern="[0-9.e\-]" on-value-changed="_queryServer" error-message="Invalid input" invalid="[[hparam.filter.interval.max.invalid]]" placeholder="+infinity">
                    </paper-input>
                  </template>
                  
                  <template is="dom-if" if="[[hparam.filter.regexp]]">
                    <paper-input label="Regular expression" value="{{hparam.filter.regexp}}" on-value-changed="_queryServer">
                    </paper-input>
                  </template>
                </div>
              </template>
            </div>
            <div class="section metrics">
              <div class="section-title">Metrics</div>
              <template is="dom-repeat" items="{{_metrics}}" as="metric">
                <div class="metric">
                  
                  <paper-checkbox checked="{{metric.displayed}}" class="metric-checkbox">
                    [[_metricName(metric.info)]]
                  </paper-checkbox>
                  <div class="inline-element">
                    <paper-input label="Min" value="{{metric.filter.interval.min.value}}" allowed-pattern="[0-9.e\-]" on-value-changed="_queryServer" error-message="Invalid input" invalid="{{metric.filter.interval.min.invalid}}" placeholder="-infinity">
                    </paper-input>
                  </div>
                  <div class="inline-element">
                    <paper-input label="Max" allowed-pattern="[0-9.e\-]" value="{{metric.filter.interval.max.value}}" on-value-changed="_queryServer" error-message="Invalid input" invalid="{{metric.filter.interval.max.invalid}}" placeholder="+infinity">
                    </paper-input>
                  </div>
                </div>
              </template>
            </div>
          </vaadin-split-layout>
          <div class="section status">
            <div class="section-title">Status</div>
            <template is="dom-repeat" items="[[_statuses]]" as="status">
              <paper-checkbox checked="{{status.allowed}}" on-change="_queryServer">
                [[status.displayName]]
              </paper-checkbox>
            </template>
          </div>
        </vaadin-split-layout>
        <vaadin-split-layout vertical id="sorting-paging">
          <div class="section sorting">
            <div class="section-title">Sorting</div>
            <paper-dropdown-menu label="Sort by" on-selected-item-changed="_queryServer" horizontal-align="left">
              <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{_sortByIndex}}" on-selected-item-changed="_queryServer">
                <template is="dom-repeat" items="[[_hparams]]" as="hparam">
                  <paper-item>
                    [[_hparamName(hparam.info)]]
                  </paper-item>
                </template>
                <template is="dom-repeat" items="[[_metrics]]" as="metric">
                  <paper-item>
                    [[_metricName(metric.info)]]
                  </paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
            <paper-dropdown-menu label="Direction" on-selected-item-changed="_queryServer" horizontal-align="left">
              <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{_sortDirection}}">
                <paper-item>Ascending</paper-item>
                <paper-item>Descending</paper-item>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>
          <div class="section paging">
            <div class="section-title">Paging</div>
            <div>
              Number of matching session groups: [[_totalSessionGroupsCountStr]]
            </div>
            <div class="inline-element page-number-input">
              <paper-input label="Page #" value="{{_pageNumberInput.value}}" allowed-pattern="[0-9]" error-message="Invalid input" invalid="[[_pageNumberInput.invalid]]" on-value-changed="_queryServer">
                <div slot="suffix" class="page-suffix">/ [[_pageCountStr]]</div>
              </paper-input>
            </div>
            <div class="inline-element page-size-input">
              <paper-input label="Max # of session groups per page:" value="{{_pageSizeInput.value}}" allowed-pattern="[0-9]" error-message="Invalid input" invalid="[[_pageSizeInput.invalid]]" on-value-changed="_queryServer">
              </paper-input>
            </div>
          </div>
        </vaadin-split-layout>
      </vaadin-split-layout>
    </div>
    <style>
      .pane {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .section {
        margin: 5px 10px 5px 10px;
        overflow-y: auto;
      }
      .section-title {
        display: block;
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 7px;
      }
      #hyperparameters-metrics-statuses {
        flex-basis: 70%;
        flex-shrink: 1;
        flex-grow: 1;
      }
      #hyperparameters-metrics {
        flex-basis: 90%;
        flex-shrink: 1;
        flex-grow: 1;
      }
      .hyperparameters {
        flex-basis: auto;
        flex-shrink: 1;
        flex-grow: 1;
      }
      .metrics {
        flex-basis: auto;
        flex-shrink: 1;
        flex-grow: 1;
      }
      .statuses {
        flex-basis: auto;
        flex-shrink: 0;
        flex-grow: 0;
      }
      #sorting-paging {
        flex-basis: 30%;
        flex-shrink: 0;
        flex-grow: 0;
      }
      .sorting {
        flex-basis: auto;
        flex-shrink: 0;
        flex-grow: 0;
      }
      .paging {
        flex-basis: auto;
        flex-shrink: 0;
        flex-grow: 0;
      }
      .discrete-value-checkbox,
      .metric-checkbox,
      .hparam-checkbox {
        display: block;
      }
      .discrete-value-checkbox {
        margin-left: 20px;
      }
      .hparam,
      .metric {
        display: block;
      }
      .inline-element {
        display: inline-block;
        width: 40%;
        margin-left: 10px;
      }
      .page-number-input {
        width: 20%;
      }
      .page-size-input {
        width: 60%;
      }
      vaadin-split-layout {
        height: 100%;
      }
      paper-listbox {
        max-height: 15em;
      }
      .page-suffix {
        white-space: nowrap;
      }
    </style>
  </template>
  
</dom-module>








<dom-module id="paper-header-panel">
  <template>
    <style>
      :host {
        @apply --layout-vertical;
        position: relative;
        height: 100%;
        @apply --paper-header-panel;
      }

      #mainContainer {
        @apply --layout-flex;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }

      #mainPanel {
        @apply --layout-vertical;
        @apply --layout-flex;
        position: relative;
        min-height: 0;
        @apply --paper-header-panel-body;
      }

      #mainContainer {
        @apply --paper-header-panel-container;
      }

      /*
       * mode: scroll
       */
      :host([mode=scroll]) #mainContainer {
        @apply --paper-header-panel-scroll-container;
        overflow: visible;
      }

      :host([mode=scroll]) {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }

      /*
       * mode: cover
       */
      :host([mode=cover]) #mainContainer {
        @apply --paper-header-panel-cover-container;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      :host([mode=cover]) #mainPanel {
        position: static;
      }

      /*
       * mode: standard
       */
      :host([mode=standard]) #mainContainer {
        @apply --paper-header-panel-standard-container;
      }

      /*
       * mode: seamed
       */
      :host([mode=seamed]) #mainContainer {
        @apply --paper-header-panel-seamed-container;
      }


      /*
       * mode: waterfall
       */
      :host([mode=waterfall]) #mainContainer {
        @apply --paper-header-panel-waterfall-container;
      }

      /*
       * mode: waterfall-tall
       */
      :host([mode=waterfall-tall]) #mainContainer {
        @apply --paper-header-panel-waterfall-tall-container;
      }

      #dropShadow {
        transition: opacity 0.5s;
        height: 6px;
        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
        @apply --paper-header-panel-shadow;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
        pointer-events: none;
      }

      #dropShadow.has-shadow {
        opacity: 1;
      }

      #mainContainer > ::slotted(.fit) {
        @apply --layout-fit;
      }

    </style>

    <slot id="headerSlot" name="header"></slot>

    <div id="mainPanel">
      <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">
        <slot></slot>
      </div>
      <div id="dropShadow"></div>
    </div>
  </template>

  
</dom-module>











<dom-module id="paper-toolbar">
  <template>
    <style>
      :host {
        --calculated-paper-toolbar-height: var(--paper-toolbar-height, 64px);
        --calculated-paper-toolbar-sm-height: var(--paper-toolbar-sm-height, 56px);
        display: block;
        position: relative;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: var(--calculated-paper-toolbar-height);
        background: var(--paper-toolbar-background, var(--primary-color));
        color: var(--paper-toolbar-color, var(--dark-theme-text-color));
        @apply --paper-toolbar;
      }

      :host(.animate) {
        transition: var(--paper-toolbar-transition, height 0.18s ease-in);
      }

      :host(.medium-tall) {
        height: calc(var(--calculated-paper-toolbar-height) * 2);
        @apply --paper-toolbar-medium;
      }

      :host(.tall) {
        height: calc(var(--calculated-paper-toolbar-height) * 3);
        @apply --paper-toolbar-tall;
      }

      .toolbar-tools {
        position: relative;
        height: var(--calculated-paper-toolbar-height);
        padding: 0 16px;
        pointer-events: none;
        @apply --layout-horizontal;
        @apply --layout-center;
        @apply --paper-toolbar-content;
      }

      /*
       * TODO: Where should media query breakpoints live so they can be shared between elements?
       */

      @media (max-width: 600px) {
        :host {
          height: var(--calculated-paper-toolbar-sm-height);
        }

        :host(.medium-tall) {
          height: calc(var(--calculated-paper-toolbar-sm-height) * 2);
        }

        :host(.tall) {
          height: calc(var(--calculated-paper-toolbar-sm-height) * 3);
        }

        .toolbar-tools {
          height: var(--calculated-paper-toolbar-sm-height);
        }
      }

      #topBar {
        position: relative;
      }

      /* middle bar */
      #middleBar {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
      }

      :host(.tall) #middleBar,
      :host(.medium-tall) #middleBar {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
      }

      /* bottom bar */
      #bottomBar {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
      }

      /*
       * make elements (e.g. buttons) respond to mouse/touch events
       *
       * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
       * absorb events. All children must have pointer events re-enabled to work as
       * expected.
       */
      .toolbar-tools > ::slotted(*:not([disabled])) {
        pointer-events: auto;
      }

      .toolbar-tools > ::slotted(.title) {
        @apply --paper-font-common-base;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        pointer-events: none;
        @apply --layout-flex;
      }

      .toolbar-tools > ::slotted(.title) {
        margin-left: 56px;
      }

      .toolbar-tools > ::slotted(paper-icon-button + .title) {
        margin-left: 0;
      }

      /**
       * The --paper-toolbar-title mixin is applied here instead of above to
       * fix the issue with margin-left being ignored due to css ordering.
       */
      .toolbar-tools > ::slotted(.title) {
        @apply --paper-toolbar-title;
      }

      .toolbar-tools > ::slotted(paper-icon-button[icon=menu]) {
        margin-right: 24px;
      }

      .toolbar-tools > ::slotted(.fit) {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        margin: 0;
      }

      /* TODO(noms): Until we have a better solution for classes that don't use
       * /deep/ create our own.
       */
      .start-justified {
        @apply --layout-start-justified;
      }

      .center-justified {
        @apply --layout-center-justified;
      }

      .end-justified {
        @apply --layout-end-justified;
      }

      .around-justified {
        @apply --layout-around-justified;
      }

      .justified {
        @apply --layout-justified;
      }
    </style>

    <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]">
      <slot name="top"></slot>
    </div>

    <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]">
      <slot name="middle"></slot>
    </div>

    <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]">
      <slot name="bottom"></slot>
    </div>
  </template>

  
</dom-module>











<dom-module id="tf-hparams-scale-and-color-controls">
  <template>
    <div class="control-panel">
      
      <paper-dropdown-menu label="Color by" id="colorByDropDownMenu" horizontal-align="left">
        <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{options.colorByColumnIndex}}" id="colorByListBox">
          <template is="dom-repeat" items="[[options.columns]]" as="column" id="colorByColumnTemplate">
            <paper-item disabled="[[!_isNumericColumn(column.index)]]">
              [[column.name]]
            </paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>

      
      <div class="columns-container">
        
        <template is="dom-repeat" items="{{options.columns}}" as="column">
          <template is="dom-if" if="[[_isNumericColumn(column.index)]]">
            <div class="column">
              <div class="column-title">
                [[column.name]]
              </div>
              <div>
                <paper-radio-group class="scale-radio-group" selected="{{column.scale}}">
                  <paper-radio-button name="LINEAR">
                    Linear
                  </paper-radio-button>
                  
                  <paper-radio-button id="logScaleButton_[[column.name]]" name="LOG" disabled="[[!_allowLogScale(column, sessionGroups.*)]]">
                    Logarithmic
                  </paper-radio-button>
                  <paper-radio-button name="QUANTILE">
                    Quantile
                  </paper-radio-button>
                </paper-radio-group>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>

    <style>
      :host {
        display: block;
      }
      .control-panel {
        overflow: auto;
      }
      .column {
        flex-grow: 1;
        flex-shrink: 1;
        margin-right: 5px;
        border: solid 1px darkgray;
        padding: 3px;
      }
      .column-title {
        /* Fit every title in one line so the radio boxes align vertically. */
        white-space: nowrap;
        text-decoration: underline;
      }
      .columns-container {
        display: flex;
        flex-direction: row;
      }
      .scale-radio-group paper-radio-button {
        padding: 2px;
        display: block;
      }
      paper-listbox {
        max-height: 15em;
      }
    </style>
  </template>

  
</dom-module>












<dom-module id="vaadin-grid-active-item-themability-styles">
  <template>
    <style>
      vaadin-grid-table .vaadin-grid-row[active] .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        @apply(--vaadin-grid-body-row-active-cell);
      }
    </style>
  </template>
</dom-module>





<dom-module id="vaadin-grid-table-table-scroll-styles">
  <template>
    <style>
      #table {
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        z-index: -2;
      }

      vaadin-grid-table[ios] #table {
        transform: none;
      }

      vaadin-grid-table[fixed-sections] #table {
        transform: none;
      }
    </style>
  </template>
</dom-module>

<dom-module id="vaadin-grid-table-scroll-styles">
  <template>
    <style>
      vaadin-grid-table {
        transform: translateZ(0);
      }

      vaadin-grid-table-header {
        position: absolute;
        top: 0;
        width: 100%;
      }

      vaadin-grid-table-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
      }

      vaadin-grid-table-body {
        z-index: -1;
      }

      vaadin-grid-table[fixed-sections] {
        /* Any value other than ‘none’ for the transform results in the creation of both a stacking context and
        a containing block. The object acts as a containing block for fixed positioned descendants. */
        transform: translateZ(0);
        overflow: hidden;
      }

      vaadin-grid-table[fixed-sections] vaadin-grid-table-header,
      vaadin-grid-table[fixed-sections] vaadin-grid-table-footer {
        position: fixed;
      }

      vaadin-grid-table[fixed-sections] vaadin-grid-table-body#items {
        position: fixed;
        width: 100%;
        will-change: transform;
      }
    </style>
  </template>
</dom-module>









<dom-module id="vaadin-grid-table-cell"></dom-module>
<dom-module id="vaadin-grid-table-header-cell"></dom-module>
<dom-module id="vaadin-grid-table-footer-cell"></dom-module>
<dom-module id="vaadin-grid-sizer-cell"></dom-module>




<dom-module id="vaadin-grid-sizer">
  <template>
    <style>
      :host {
        display: flex;
        visibility: hidden;
      }

      .cell {
        display: block;
        flex-shrink: 0;
        line-height: 0;
        font-size: 1px;
        margin-top: -1em;
      }

      .cell[hidden] {
        display: none;
      }
    </style>

    <template is="dom-repeat" items="[[_columns]]" as="column">
      <vaadin-grid-sizer-cell class="cell" column="[[column]]">&nbsp;</vaadin-grid-sizer-cell>
    </template>

  </template>
  
</dom-module>


<dom-module id="vaadin-grid-table-outer-scroller">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        overflow: auto;
      }

      :host([passthrough]) {
        pointer-events: none;
      }

      :host([ios]) {
        pointer-events: all;
        z-index: -3;
      }

      :host([ios][scrolling]) {
        z-index: 0;
      }
    </style>

    <slot></slot>

  </template>
  
</dom-module>









<dom-module id="vaadin-grid-table-focus-trap">
  <template>
    <style>
     :host {
       position: absolute;
       z-index: -3;
       height: 0;
       overflow: hidden;
     }

     :host(:focus),
     .primary:focus,
     ::slotted(.primary:focus),
     .secondary:focus,
     ::slotted(.secondary:focus) {
       outline: none;
     }
    </style>

    
    <div class="primary" tabindex="0" role="gridcell" on-focus="_onBaitFocus" on-blur="_onBaitBlur"><div aria-hidden="true">&nbsp;</div></div>
    <div class="secondary" tabindex="-1" role="gridcell" on-focus="_onBaitFocus" on-blur="_onBaitBlur"><div aria-hidden="true">&nbsp;</div></div>

    <slot></slot>
  </template>
  
</dom-module>



<dom-module id="vaadin-grid-table-row"></dom-module>
<dom-module id="vaadin-grid-table-header-row"></dom-module>








<dom-module id="vaadin-grid-row-details-styles">
  <template>
    <style>
      [detailscell] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    </style>
  </template>
</dom-module>
<dom-module id="vaadin-grid-row-details-themability-styles">
  <template>
    <style>
      .vaadin-grid-cell[detailscell] ::slotted(vaadin-grid-cell-content) {
        background: #fff;
        @apply(--vaadin-grid-body-row-details-cell);
      }
    </style>
  </template>
</dom-module>




<dom-module id="vaadin-grid-data-provider-themability-styles">
  <template>
    <style>

      /* Anim */
      @keyframes vaadin-grid-spin-360 {
        100% {
          transform: rotate(360deg);
        }
      }
      @-webkit-keyframes vaadin-grid-spin-360 {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      #spinner {
        border: 2px solid var(--primary-color, #03A9F4);
        border-radius: 50%;
        border-right-color: transparent;
        border-top-color: transparent;
        content: "";
        height: 16px;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        width: 16px;
        pointer-events: none;
        opacity: 0;
        @apply(--vaadin-grid-loading-spinner);
      }

      :host([loading]) #spinner {
        opacity: 1;
        -webkit-animation: vaadin-grid-spin-360 400ms linear infinite;
        animation: vaadin-grid-spin-360 400ms linear infinite;
      }

      :host([loading]) #items {
        opacity: 0.5;
      }

    </style>
  </template>
</dom-module>






<dom-module id="vaadin-grid-selection-themability-styles">
  <template>
    <style>
      vaadin-grid-table .vaadin-grid-row[selected] .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        background-color: var(--paper-grey-100, rgb(243, 243, 243));
        @apply(--vaadin-grid-body-row-selected-cell);
      }
    </style>
  </template>
</dom-module>




<dom-module id="vaadin-grid-navigation-themability-styles">
  <template>
    <style>
      :host(:focus),
      #table:focus {
        outline: none;
      }

      :host([navigating]:not([interacting])) [focused] > .vaadin-grid-row[focused] > [focused] ::slotted(vaadin-grid-cell-content) {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3);
        @apply(--vaadin-grid-focused-cell);
      }
    </style>
  </template>
</dom-module>



<dom-module id="vaadin-grid-column-reordering-themability-styles">
  <template>
    <style>
      vaadin-grid-table[reordering] .vaadin-grid-cell {
        background: #000;
      }

      :host([reordering]) .vaadin-grid-cell[reorder-status="dragging"] {
        background: var(--primary-color, #000);
      }

      vaadin-grid-table[reordering] .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        transition: opacity 300ms;
        transform: translateZ(0);
        opacity: 0.8;
      }

      #scroller .vaadin-grid-cell[reorder-status="allowed"] ::slotted(vaadin-grid-cell-content) {
        opacity: 1;
      }

      #scroller .vaadin-grid-cell[reorder-status="dragging"] {
        background: var(--primary-color, #000);
      }

      #scroller .vaadin-grid-cell[reorder-status="dragging"] ::slotted(vaadin-grid-cell-content) {
        opacity: 0.95;
      }
    </style>
  </template>
</dom-module>









<dom-module id="vaadin-grid-table-styles">
  <template>
    <style>

      @keyframes appear {
        to {
          opacity: 1;
        }
      }

      vaadin-grid-table {
        display: block;
        position: relative;
        animation: 1ms appear;
      }

      @media only screen and (-webkit-max-device-pixel-ratio: 1) {
        :host {
          will-change: transform;
        }
      }

      #items {
        position: relative;
      }

      #items {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
      }

      #items > .vaadin-grid-row {
        box-sizing: border-box;
        margin: 0;
        position: absolute;
      }

      vaadin-grid-table-body {
        display: block;
      }

      vaadin-grid-table-header .vaadin-grid-cell,
      vaadin-grid-table-footer .vaadin-grid-cell {
        top: 0;
      }

      .vaadin-grid-cell {
        padding: 0;
        flex-shrink: 0;
        flex-grow: 1;
        box-sizing: border-box;
        display: flex;
      }

      .vaadin-grid-cell:not([detailscell]) {
        position: relative;
      }

      .vaadin-grid-cell ::slotted(vaadin-grid-cell-content) {
         width: 100%;
         display: inline-flex;
         justify-content: center;
         flex-direction: column;
         white-space: nowrap;
         overflow: hidden;
      }

      .vaadin-grid-column-resize-handle {
        position: absolute;
        right: 0;
        height: 100%;
        cursor: col-resize;
        z-index: 1;
      }

      .vaadin-grid-column-resize-handle::before {
        position: absolute;
        content: "";
        height: 100%;
        width: 35px;
        transform: translateX(-50%);
      }

      [lastcolumn] .vaadin-grid-column-resize-handle::before,
      [last-frozen] .vaadin-grid-column-resize-handle::before {
        width: 18px;
        transform: translateX(-100%);
      }

      vaadin-grid-table[column-reordering-allowed] #header,
      vaadin-grid-table[column-resizing] {
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      vaadin-grid-table[column-resizing] {
        cursor: col-resize;
      }

      .vaadin-grid-row:not([hidden]) {
        display: flex;
        width: 100%;
      }

      [frozen] {
        z-index: 2;
      }

      [hidden] {
        display: none;
      }

      vaadin-grid-table[no-content-pointer-events] .vaadin-grid-cell ::slotted(vaadin-grid-cell-content) {
        pointer-events: none;
      }
    </style>
  </template>
</dom-module>

<dom-module id="vaadin-grid-table-table-styles">
  <template>
    <style>
      :host([ios][column-resizing]) #outerscroller {
        overflow: hidden;
      }

      #fixedsizer,
      #outersizer {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
      }

      #table {
        height: 100%;
        width: 100%;
        display: block;
        overflow: auto;
        box-sizing: border-box;
      }

      #table[overflow-hidden],
      #outerscroller[overflow-hidden] {
        overflow: hidden;
      }

      vaadin-grid-sizer {
        position: relative;
        width: 100%;
      }

      #sizerwrapper {
        position: absolute;
        width: 100%;
        z-index: -100;
      }

      #reorderghost {
        visibility: hidden;
        position: fixed;
        opacity: 0.5;
        pointer-events: none;
      }

      ::slotted(vaadin-grid-column),
      ::slotted(vaadin-grid-selection-column),
      ::slotted(vaadin-grid-column-group) {
        display: none;
      }

    </style>
  </template>
</dom-module>

<dom-module id="vaadin-grid-table-themability-styles">
  <template>
    <style>

      /* Default borders */
      vaadin-grid-table-header .vaadin-grid-row:last-child .vaadin-grid-cell ::slotted(vaadin-grid-cell-content) {
        border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
      }

      vaadin-grid-table-footer .vaadin-grid-row:first-child .vaadin-grid-cell ::slotted(vaadin-grid-cell-content) {
        border-top: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
      }

      vaadin-grid-table-body .vaadin-grid-row:not([lastrow]) .vaadin-grid-cell ::slotted(vaadin-grid-cell-content) {
        border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
      }

      [last-frozen] ::slotted(vaadin-grid-cell-content) {
        border-right: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
      }

      /* Column resize handle */

      .vaadin-grid-column-resize-handle {
        border-right: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
        @apply(--vaadin-grid-column-resize-handle);
      }

      /* Cells */
      vaadin-grid-table .vaadin-grid-row .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        background: #fff;
        text-align: left;
        padding: 8px;
        box-sizing: border-box;
        @apply(--vaadin-grid-cell);
      }

      vaadin-grid-table-header .vaadin-grid-row .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        font-weight: 500;
        @apply(--vaadin-grid-header-cell);
      }

      vaadin-grid-table-footer .vaadin-grid-row .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        font-weight: 500;
        @apply(--vaadin-grid-footer-cell);
      }

      vaadin-grid-table-body .vaadin-grid-row .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        @apply(--vaadin-grid-body-cell);
      }

      vaadin-grid-table-body [odd] .vaadin-grid-cell:not([detailscell]) ::slotted(vaadin-grid-cell-content) {
        @apply(--vaadin-grid-body-row-odd-cell);
      }

      vaadin-grid-table .vaadin-grid-row .vaadin-grid-cell:not([detailscell])[last-frozen] ::slotted(vaadin-grid-cell-content) {
        @apply(--vaadin-grid-cell-last-frozen);
      }

      vaadin-grid-table:not([scrolling]) vaadin-grid-table-body .vaadin-grid-row:hover .vaadin-grid-cell ::slotted(vaadin-grid-cell-content) {
        @apply(--vaadin-grid-body-row-hover-cell);
      }

      vaadin-grid-table .vaadin-grid-row .vaadin-grid-cell.vaadin-grid-cell[lastcolumn] ::slotted(vaadin-grid-cell-content) {
        border-right: none;
      }

    </style>
  </template>
</dom-module>

<dom-module id="vaadin-grid-table">
  <template>
      <style include="vaadin-grid-table-table-scroll-styles"></style>
      <style include="vaadin-grid-table-table-styles"></style>

      <style include="vaadin-grid-data-provider-themability-styles"></style>

      <div id="spinner"></div>
      <div id="table" tabindex="-1" overflow-hidden$="[[_hideTableOverflow(scrollbarWidth, safari)]]">
        <div id="sizerwrapper">
          <vaadin-grid-sizer id="fixedsizer" top="[[_estScrollHeight]]" column-tree="[[columnTree]]"></vaadin-grid-sizer>
        </div>
        <slot name="header"></slot>
        <slot name="items"></slot>
        <slot name="footer"></slot>
      </div>

      <div id="reorderghost"></div>
      <vaadin-grid-table-outer-scroller id="outerscroller" scroll-target="[[scrollTarget]]" overflow-hidden$="[[_hideOuterScroller(scrollbarWidth, safari)]]" ios$="[[ios]]" scrolling$="[[scrolling]]">
      <vaadin-grid-sizer id="outersizer" top="[[_estScrollHeight]]" column-tree="[[columnTree]]"></vaadin-grid-sizer>
    </vaadin-grid-table-outer-scroller>
    <slot></slot>
    <slot name="footerFocusTrap"></slot>
  </template>
</dom-module>








<dom-module id="vaadin-grid-column">
  
</dom-module>















<dom-module id="vaadin-grid">
  <template>
    <style>
      :host {
        display: block;
        height: 400px;
        background: var(--primary-background-color, #fff);
        box-sizing: border-box;
        border: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
      }

      :host(:focus) {
        -webkit-tap-highlight-color: transparent;
      }

      :host(:focus) {
        outline: none;
      }

      #scroller {
        height: 100%;
        width: 100%;
      }
    </style>

    <style include="vaadin-grid-table-scroll-styles"></style>
    <style include="vaadin-grid-row-details-styles"></style>
    <style include="vaadin-grid-table-styles"></style>

    <style include="vaadin-grid-table-themability-styles"></style>
    <style include="vaadin-grid-selection-themability-styles"></style>
    <style include="vaadin-grid-navigation-themability-styles"></style>
    <style include="vaadin-grid-active-item-themability-styles"></style>
    <style include="vaadin-grid-row-details-themability-styles"></style>
    <style include="vaadin-grid-column-reordering-themability-styles"></style>

    <vaadin-grid-table id="scroller" loading$="[[_loading]]" bind-data="[[_bindData]]" size="[[size]]" column-tree="[[_columnTree]]" row-details-template="[[_rowDetailsTemplate]]" column-reordering-allowed="[[columnReorderingAllowed]]">
      <vaadin-grid-table-header id="header" slot="header" target="[[_getContentTarget()]]" column-tree="[[_columnTree]]"></vaadin-grid-table-header>
      <vaadin-grid-table-body id="items" slot="items"></vaadin-grid-table-body>
      <vaadin-grid-table-footer id="footer" slot="footer" target="[[_getContentTarget()]]" column-tree="[[_columnTree]]"></vaadin-grid-table-footer>

      
      <slot name="footerFocusTrap"></slot>

      
      
      <slot></slot>

      <vaadin-grid-table-focus-trap id="footerFocusTrap" slot="footerFocusTrap" on-focus-gained="_onFooterFocus" on-focus-lost="_onFocusout">
      </vaadin-grid-table-focus-trap>
    </vaadin-grid-table>
  </template>
</dom-module>












<dom-module id="tf-hparams-session-group-details">
  <template>
    <template is="dom-if" if="[[!sessionGroup]]">
      <div>
        <h3>No session group selected</h3>
        <p>Please select a session group to see its metric-graphs here.
      </div>
    </template>
    <template is="dom-if" if="[[!_haveMetrics(visibleSchema.*)]]">
      <div>
        <h3>No metrics are enabled</h3>
        <p>Please enable some metrics to see content here.
      </div>
    </template>
    <div class="layout horizontal wrap session-group-details">
      <template is="dom-if" if="[[_haveMetricsAndSessionGroup(visibleSchema.*,
                                                  sessionGroup)]]">
        <template is="dom-repeat" items="[[visibleSchema.metricInfos]]" as="metricInfo">
          
          <tf-scalar-card class="scalar-card" color-scale="[[_colorScale]]" data-to-load="[[_computeSeriesForSessionGroupMetric(sessionGroup,
                          metricInfo)]]" tag="[[metricInfo.name.tag]]" tag-metadata="[[_computeTagMetadata(metricInfo)]]" x-type="[[_xType]]" multi-experiments="[[_noMultiExperiments]]" request-data="[[_requestData]]" active>
          </tf-scalar-card>
        </template>
      </template>
    </div>
    
    <style include="iron-flex">
      :host {
        display: block;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="tf-hparams-table-view">
  <template>
    <vaadin-grid class="session-group-table" id="sessionGroupsTable" column-reordering-allowed items="[[sessionGroups]]">
      <vaadin-grid-column flex-grow="0" width="10em" resizable>
        <template class="header">
          <div class="table-header table-cell">Trial ID</div>
        </template>
        <template>
          <div class="table-cell">[[item.name]]</div>
        </template>
      </vaadin-grid-column>
      <template is="dom-if" if="[[enableShowMetrics]]">
        <vaadin-grid-column flex-grow="0" width="5em" resizable>
          <template class="header">
            <div class="table-header table-cell">Show Metrics</div>
          </template>
          <template>
            <paper-checkbox class="table-cell" checked="{{expanded}}">
            </paper-checkbox>
          </template>
        </vaadin-grid-column>
      </template>
      <template is="dom-repeat" items="[[visibleSchema.hparamInfos]]" as="hparamInfo" index-as="hparamIndex">
        <vaadin-grid-column flex-grow="2" width="10em" resizable>
          <template class="header">
            <div class="table-header table-cell">
              [[_hparamName(hparamInfo)]]
            </div>
          </template>
          <template>
            <div class="table-cell">
              [[_sessionGroupHParam(item, hparamInfo.name)]]
            </div>
          </template>
        </vaadin-grid-column>
      </template>
      <template is="dom-repeat" items="{{visibleSchema.metricInfos}}" as="metricInfo" index-as="metricIndex">
        <vaadin-grid-column flex-grow="2" width="10em" resizable>
          <template class="header">
            <div class="table-header table-cell">
              [[_metricName(metricInfo)]]
            </div>
          </template>
          <template>
            <div class="table-cell">
              [[_sessionGroupMetric(item, metricInfo.name)]]
            </div>
          </template>
        </vaadin-grid-column>
      </template>
      <template class="row-details">
        <tf-hparams-session-group-details backend="[[backend]]" experiment-name="[[experimentName]]" session-group="[[item]]" visible-schema="[[visibleSchema]]" class="session-group-details">
        </tf-hparams-session-group-details>
      </template>
    </vaadin-grid>

    <style>
      :host {
        display: block;
      }
      .table-cell {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .table-header {
        /* line-break overflowing column headers */
        white-space: normal;
        overflow-wrap: break-word;
      }
      .session-group-table {
        height: 100%;
      }
      .session-group-details {
        height: 360px;
        overflow-y: auto;
      }
    </style>
  </template>

  
</dom-module>


<dom-module id="tf-hparams-session-group-values">
  <template>
    
    <template is="dom-if" if="[[_propertiesArePopulated(visibleSchema, sessionGroup)]]">
      
      <tf-hparams-table-view visible-schema="[[visibleSchema]]" session-groups="[[_singletonSessionGroups(sessionGroup)]]">
      </tf-hparams-table-view>
    </template>
    <template is="dom-if" if="[[!_propertiesArePopulated(visibleSchema, sessionGroup)]]">
      <div>
        Click or hover over a session group to display its values here.
      </div>
    </template>

    <style>
      :host {
        display: block;
      }
    </style>
  </template>
  
</dom-module>







<dom-module id="tf-hparams-parallel-coords-plot">
  <template>
    <div id="container">
      <svg id="svg"></svg>
    </div>
    <style>
      :host {
        display: block;
      }
      svg {
        font: 10px sans-serif;
      }

      .background path {
        fill: none;
        stroke: #ddd;
        shape-rendering: crispEdges;
      }

      .foreground path {
        fill: none;
        stroke-opacity: 0.7;
        stroke-width: 1;
      }

      /* Will be set on foreground paths that are not "contained" in the current
         axes brushes. If no brushes are set, no path will have this class. */
      .foreground .invisible-path {
        display: none;
      }

      /* Style for the path closest to the mouse pointer (typically will become
      the selected path when the user clicks). */
      .foreground .peaked-path {
        stroke-width: 3;
      }

      /* The currently selected path class. We use !important to override the
         inline style that sets the regular color of a path. */
      .foreground .selected-path {
        stroke-width: 3 !important;
        stroke: #0f0 !important;
      }

      #container {
        height: 100%;
        width: 100%;
      }

      svg {
        width: 100%;
        height: 100%;
      }

      .axis text {
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
        fill: #000;
        cursor: move;
      }
    </style>
  </template>

  
  
  
  
</dom-module>





<dom-module id="tf-hparams-parallel-coords-view">
  <template>
    
    <div class="pane">
      <vaadin-split-layout vertical>
        
        <tf-hparams-scale-and-color-controls id="controls" class="section" configuration="[[configuration]]" session-groups="[[sessionGroups]]" options="{{_options}}">
        </tf-hparams-scale-and-color-controls>
        <vaadin-split-layout vertical>
          
          <tf-hparams-parallel-coords-plot id="plot" class="section" session-groups="[[sessionGroups]]" selected-session-group="{{_selectedGroup}}" closest-session-group="{{_closestGroup}}" options="[[_options]]">
          </tf-hparams-parallel-coords-plot>
          <vaadin-split-layout vertical>
            <tf-hparams-session-group-values id="values" class="section" visible-schema="[[configuration.visibleSchema]]" session-group="[[_closestOrSelected(
                             _closestGroup, _selectedGroup)]]">
            </tf-hparams-session-group-values>
            <tf-hparams-session-group-details id="details" class="section" backend="[[backend]]" experiment-name="[[experimentName]]" session-group="[[_selectedGroup]]" visible-schema="[[configuration.visibleSchema]]">
            </tf-hparams-session-group-details>
          </vaadin-split-layout>
        </vaadin-split-layout>
      </vaadin-split-layout>
    </div>

    <style>
      .pane {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .section {
        margin: 10px;
      }
      #controls {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      #plot {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        height: 100%;
        overflow-y: auto;
      }
      #values {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        height: 95px;
        overflow-y: auto;
        max-height: fit-content;
      }
      #details {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      vaadin-split-layout {
        height: 100%;
      }
    </style>
  </template>

  
</dom-module>








<dom-module id="tf-hparams-scatter-plot-matrix-plot">
  <template>
    <div id="container">
      <svg id="svg"></svg>
    </div>

    <style>
      :host {
        display: block;
      }
      svg {
        font: 10px sans-serif;
      }

      /* The closest data point marker to the mouse pointer. We use !important
         to override the inline style that sets the regular style of a marker.
      */
      .closest-marker {
        r: 6 !important;
      }

      /* The currently selected data point marker. We use !important to
         override the inline style that sets the regular style of a marker. */
      .selected-marker {
        r: 6 !important;
        fill: #0f0 !important;
      }
    </style>
  </template>

  
</dom-module>





<dom-module id="tf-hparams-scatter-plot-matrix-view">
  <template>
    <div class="pane">
      <vaadin-split-layout vertical>
        
        <tf-hparams-scale-and-color-controls class="section" id="controls" configuration="[[configuration]]" session-groups="[[sessionGroups]]" options="{{_options}}">
        </tf-hparams-scale-and-color-controls>
        <vaadin-split-layout vertical>
          
          <tf-hparams-scatter-plot-matrix-plot class="section" id="plot" visible-schema="[[configuration.visibleSchema]]" session-groups="[[sessionGroups]]" selected-session-group="{{_selectedGroup}}" closest-session-group="{{_closestGroup}}" options="[[_options]]">
          </tf-hparams-scatter-plot-matrix-plot>
          <vaadin-split-layout vertical>
            <tf-hparams-session-group-values class="section" id="values" visible-schema="[[configuration.visibleSchema]]" session-group="[[_closestOrSelected(
                                 _closestGroup, _selectedGroup)]]">
            </tf-hparams-session-group-values>
            
            <tf-hparams-session-group-details class="section" id="details" backend="[[backend]]" experiment-name="[[experimentName]]" session-group="[[_selectedGroup]]" visible-schema="[[configuration.visibleSchema]]">
            </tf-hparams-session-group-details>
          </vaadin-split-layout>
        </vaadin-split-layout>
      </vaadin-split-layout>
    </div>
    <style>
      .pane {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .section {
        margin: 10px;
      }
      #controls {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      #plot {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      #values {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        height: 95px;
        overflow-y: auto;
        max-height: fit-content;
      }
      #details {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        height: auto;
        overflow-y: auto;
        max-height: fit-content;
      }
      vaadin-split-layout {
        height: 100%;
      }
    </style>
  </template>

  
</dom-module>




<dom-module id="tf-hparams-sessions-pane">
  <template>
    <paper-header-panel>
      <paper-toolbar slot="header" class="tab-bar">
        <paper-tabs selected="{{_selectedTab}}" slot="top">
          
          <paper-tab view-id="table-view">
            TABLE VIEW
          </paper-tab>
          <paper-tab view-id="parallel-coords-view">
            PARALLEL COORDINATES VIEW
          </paper-tab>
          <paper-tab view-id="scatter-plot-matrix-view">
            SCATTER PLOT MATRIX VIEW
          </paper-tab>
          <div class="help-and-feedback">
            <template is="dom-if" if="[[bugReportUrl]]">
              <a href$="[[bugReportUrl]]" target="_blank" rel="noopener noreferrer">
                <paper-button id="bug-report" raised title="Send a bug report or feature request">
                  Bug Report / Feature Request
                </paper-button>
              </a>
            </template>
            <template is="dom-if" if="[[helpUrl]]">
              <a href$="[[helpUrl]]" target="_blank" rel="noopener noreferrer">
                <paper-icon-button icon="help-outline" title="View documentation">
                </paper-icon-button>
              </a>
            </template>
          </div>
        </paper-tabs>
      </paper-toolbar>
      <iron-pages selected="[[_selectedTab]]" class="fit tab-view">
        <div id="0" class="tab">
          <tf-hparams-table-view backend="[[backend]]" experiment-name="[[experimentName]]" visible-schema="[[configuration.visibleSchema]]" session-groups="[[sessionGroups]]" enable-show-metrics>
          </tf-hparams-table-view>
        </div>
        <div id="1" class="tab">
          <tf-hparams-parallel-coords-view backend="[[backend]]" experiment-name="[[experimentName]]" configuration="[[configuration]]" session-groups="[[sessionGroups]]">
          </tf-hparams-parallel-coords-view>
        </div>
        <div id="2" class="tab">
          <tf-hparams-scatter-plot-matrix-view backend="[[backend]]" experiment-name="[[experimentName]]" configuration="[[configuration]]" session-groups="[[sessionGroups]]">
          </tf-hparams-scatter-plot-matrix-view>
        </div>
      </iron-pages>
    </paper-header-panel>

    <style>
      .tab-view {
        height: 100%;
      }
      .tab-bar {
        overflow-y: auto;
        color: white;
        background-color: var(
          --tb-toolbar-background-color,
          var(--tb-orange-strong)
        );
      }
      .tab {
        height: 100%;
      }
      paper-tabs {
        flex-grow: 1;
        width: 100%;
        height: 100%;
        --paper-tabs-selection-bar-color: white;
        --paper-tabs-content: {
          -webkit-font-smoothing: antialiased;
        }
      }
      tf-hparams-table-view {
        width: 100%;
        height: 100%;
      }
      .help-and-feedback {
        display: inline-flex; /* Ensure that icons stay aligned */
        justify-content: flex-end;
        align-items: center;
        text-align: right;
        color: white;
      }
      #bug-report {
        border: solid black;
        background: red;
        white-space: normal;
        word-break: break-words;
        font-size: 12px;
        max-width: 150px;
        text-align: left;
      }
      .help-and-feedback a {
        color: white;
        text-decoration: none;
      }
    </style>
  </template>

  
</dom-module>










<dom-module id="tf-hparams-main">
  <template>
    <vaadin-split-layout>
      <div class="sidebar" slot="sidebar">
        <tf-hparams-query-pane id="query-pane" backend="[[backend]]" experiment-name="[[experimentName]]" configuration="{{_configuration}}" session-groups="{{_sessionGroups}}">
        </tf-hparams-query-pane>
      </div>
      <div class="center" slot="center">
        <tf-hparams-sessions-pane id="sessions-pane" backend="[[backend]]" help-url="[[helpUrl]]" bug-report-url="[[bugReportUrl]]" experiment-name="[[experimentName]]" configuration="[[_configuration]]" session-groups="[[_sessionGroups]]">
        </tf-hparams-sessions-pane>
      </div>
    </vaadin-split-layout>
    <tf-hparams-google-analytics-tracker id="tracker" tracking-id="[[trackingId]]" name="tf_hparams">
    </tf-hparams-google-analytics-tracker>

    <style>
      vaadin-split-layout {
        width: 100%;
      }

      .sidebar {
        width: 20%;
        height: 100%;
        overflow: auto;
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 10%;
      }

      .center {
        height: 100%;
        overflow-y: auto;
        flex-grow: 1;
        flex-shrink: 1;
        width: 80%;
      }

      :host {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
      }
    </style>
  </template>

  
</dom-module>







<dom-module id="tf-hparams-dashboard">
  <template>
    
    <tf-hparams-main id="hparams-main" backend="[[_backend]]" experiment-name="">
    </tf-hparams-main>
  </template>
  
</dom-module>























<dom-module id="tf-mesh-loader">
  <template>
    <tf-card-heading color="[[_runColor]]" class="tf-mesh-loader-header">
      <template is="dom-if" if="[[_hasMultipleSamples(ofSamples)]]">
        <div>sample: [[_getSampleText(sample)]] of [[ofSamples]]</div>
      </template>
      <template is="dom-if" if="[[_hasAtLeastOneStep(_steps)]]">
        <div class="heading-row">
          <div class="heading-label">
            step
            <span style="font-weight: bold">[[toLocaleString_(_stepValue)]]</span>
          </div>
          <div class="heading-label heading-right">
            <template is="dom-if" if="[[_currentWallTime]]">
              [[_currentWallTime]]
            </template>
          </div>
          <div class="label right">
            <paper-spinner-lite active hidden$="[[!_isMeshLoading]]">
            </paper-spinner-lite>
          </div>
        </div>
      </template>
      <template is="dom-if" if="[[_hasMultipleSteps(_steps)]]">
        <div>
          <paper-slider id="steps" immediate-value="{{_stepIndex}}" max="[[_getMaxStepIndex(_steps)]]" max-markers="[[_getMaxStepIndex(_steps)]]" snaps step="1" value="{{_stepIndex}}"></paper-slider>
        </div>
      </template>
    </tf-card-heading>
    <style>
      paper-slider {
        width: 100%;
        margin-left: 1px;
        margin-right: 1px;
      }
      .tf-mesh-loader-header {
        display: block;
        height: 105px;
      }
      [hidden] {
        display: none;
      }
    </style>
  </template>
  
</dom-module>



<dom-module id="mesh-dashboard">
  <template>
    <tf-dashboard-layout>
      <div slot="sidebar" class="all-controls">
        <div class="sidebar-section view-control">
          <h3 class="title">Point of view</h3>
          <div>
            <paper-radio-group id="view-radio-group" selected="{{_selectedView}}">
              <paper-radio-button id="all-radio-button" name="all">
                Display all points
              </paper-radio-button>
              <paper-tooltip animation-delay="0" for="all-radio-button" position="right" offset="0">
                Zoom and center camera to display all points at once. Note, that
                some points could be too far (i.e. too small) to be visible.
              </paper-tooltip>
              <paper-radio-button id="user-radio-button" name="user">
                Current view
              </paper-radio-button>
              <paper-tooltip animation-delay="0" for="user-radio-button" position="right" offset="0">
                Keep current camera position and zoom level.
              </paper-tooltip>
              <paper-radio-button id="share-radio-button" name="share">
                Share viewpoint
              </paper-radio-button>
              <paper-tooltip animation-delay="0" for="share-radio-button" position="right" offset="0">
                Share viewpoint among all cameras.
              </paper-tooltip>
            </paper-radio-group>
          </div>
        </div>
        <div class="sidebar-section runs-selector">
          <tf-runs-selector selected-runs="{{_selectedRuns}}">
          </tf-runs-selector>
        </div>
      </div>
      <div slot="center">
        <template is="dom-if" if="[[_dataNotFound]]">
          <div class="no-data-warning">
            <h3>No point cloud data was found.</h3>
            <p>Probable causes:
            <ul>
              <li>
                You haven’t written any point cloud data to your event files.
              </li>
              <li>TensorBoard can’t find your event files.</li>
            </ul>

            <p>
              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
            

            <p>
              If you think TensorBoard is configured properly, please see
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
              and consider filing an issue on GitHub.
            
          </div>
        </template>
        <template is="dom-if" if="[[!_dataNotFound]]">
          <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
          <template is="dom-repeat" items="[[_categories]]" as="category">
            <tf-category-paginated-view category="[[category]]" initial-opened="[[_shouldOpen(index)]]">
              <template>
                <tf-mesh-loader active="[[active]]" selected-view="[[_selectedView]]" run="[[item.run]]" tag="[[item.tag]]" sample="[[item.sample]]" of-samples="[[item.ofSamples]]" request-manager="[[_requestManager]]" class="tf-mesh-loader-container" on-camera-position-change="_onCameraPositionChanged">
                </tf-mesh-loader>
              </template>
            </tf-category-paginated-view>
          </template>
        </template>
      </div>
    </tf-dashboard-layout>

    <style include="dashboard-style"></style>
    <style>
      .no-data-warning {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }
      paper-radio-button {
        display: block;
        padding: 5px;
      }
      .sidebar-section h3.title {
        color: var(--paper-grey-800);
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        margin-bottom: 5px;
      }

      .runs-selector {
        flex-grow: 1;
      }

      tf-runs-selector {
        display: flex;
      }

      .view-control {
        display: block !important;
      }

      .view-control h3.title {
        padding-top: 16px;
        padding-bottom: 16px;
      }

      .allcontrols .view-control paper-radio-group {
        margin-top: 5px;
      }
      /* Layout must be horizontal, i.e. items arranged in a row. If items cannot fit in a row,
       * they should be moved to next line. All items must be square at all times. Minimum size of
       * the item is 480px. This means that maximum size of the item must be 480px + 479px = 959px.
       * */
      .horizontal {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      tf-mesh-loader {
        width: 480px;
        flex-basis: 480px;
        flex-grow: 1;
        display: block;
      }
    </style>
  </template>

  
</dom-module>





























<dom-module id="tf-tensorboard">
  <template>
    <paper-dialog with-backdrop id="settings">
      <h2>Settings</h2>
      <paper-checkbox id="auto-reload-checkbox" checked="{{autoReloadEnabled}}">
        Reload data every <span>[[autoReloadIntervalSecs]]</span>s.
      </paper-checkbox>
      <paper-input id="paginationLimitInput" label="Pagination limit" always-float-label type="number" min="1" step="1" on-change="_paginationLimitChanged" on-value-changed="_paginationLimitValidate"></paper-input>
    </paper-dialog>
    <paper-header-panel>
      <paper-toolbar id="toolbar" slot="header" class="header">
        <div id="toolbar-content" slot="top">
          <div class="toolbar-title">[[brand]]</div>
          <template is="dom-if" if="[[_activeDashboardsNotLoaded]]">
            <span class="toolbar-message">
              Loading active dashboards…
            </span>
          </template>
          <template is="dom-if" if="[[_activeDashboardsLoaded]]">
            <paper-tabs noink scrollable selected="{{_selectedDashboard}}" attr-for-selected="data-dashboard">
              <template is="dom-repeat" items="[[_dashboardData]]" as="dashboardDatum">
                <template is="dom-if" if="[[_isDashboardActive(disabledDashboards, _activeDashboards, dashboardDatum)]]">
                  <paper-tab data-dashboard$="[[dashboardDatum.plugin]]" title="[[dashboardDatum.tabName]]">
                    [[dashboardDatum.tabName]]
                  </paper-tab>
                </template>
              </template>
            </paper-tabs>
            <template is="dom-if" if="[[_inactiveDashboardsExist(_dashboardData, disabledDashboards, _activeDashboards)]]">
              <paper-dropdown-menu label="INACTIVE" no-label-float noink style="margin-left: 12px">
                <paper-listbox id="inactive-dashboards-menu" slot="dropdown-content" selected="{{_selectedDashboard}}" attr-for-selected="data-dashboard">
                  <template is="dom-repeat" items="[[_dashboardData]]" as="dashboardDatum">
                    <template is="dom-if" if="[[_isDashboardInactive(disabledDashboards, _activeDashboards, dashboardDatum)]]" restamp>
                      <paper-item data-dashboard$="[[dashboardDatum.plugin]]">[[dashboardDatum.tabName]]</paper-item>
                    </template>
                  </template>
                </paper-listbox>
              </paper-dropdown-menu>
            </template>
          </template>
          <div class="global-actions">
            <slot name="injected-header-items"></slot>
            <paper-icon-button id="reload-button" class$="[[_getDataRefreshingClass(_refreshing)]]" disabled$="[[_isReloadDisabled]]" icon="refresh" on-tap="reload" title$="Last updated: [[_lastReloadTimeShort]]"></paper-icon-button>
            <paper-icon-button icon="settings" on-tap="openSettings" id="settings-button"></paper-icon-button>
            <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md" rel="noopener noreferrer" tabindex="-1" target="_blank">
              <paper-icon-button icon="help-outline"></paper-icon-button>
            </a>
          </div>
        </div>
      </paper-toolbar>

      <div id="content-pane" class="fit">
        <slot name="injected-overview"></slot>
        <div id="content">
          <template is="dom-if" if="[[_activeDashboardsFailedToLoad]]">
            <div class="warning-message">
              <h3>Failed to load the set of active dashboards.</h3>
              <p>
                This can occur if the TensorBoard backend is no longer running.
                Perhaps this page is cached?
              

              <p>
                If you think that you’ve fixed the problem, click the reload
                button in the top-right.
                <template is="dom-if" if="[[autoReloadEnabled]]">
                  We’ll try to reload every
                  [[autoReloadIntervalSecs]]&nbsp;seconds as well.
                </template>
              

              <p>
                <i>Last reload: [[_lastReloadTime]]</i>
                <template is="dom-if" if="[[_dataLocation]]">
                  </template><p>
                    <i>Log directory:
                      <span id="data_location">[[_dataLocation]]</span></i>
                  
                
              <p>
            </div>
          </template>
          <template is="dom-if" if="[[_showNoDashboardsMessage]]">
            <div class="warning-message">
              <h3>No dashboards are active for the current data set.</h3>
              <p>Probable causes:
              <ul>
                <li>You haven’t written any data to your event files.</li>
                <li>TensorBoard can’t find your event files.</li>
              </ul>

              If you’re new to using TensorBoard, and want to find out how to
              add data and set up your event files, check out the
              <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
              and perhaps the
              <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
              <p>
                If you think TensorBoard is configured properly, please see
                <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
                and consider filing an issue on GitHub.
              

              <p>
                <i>Last reload: [[_lastReloadTime]]</i>
                <template is="dom-if" if="[[_dataLocation]]">
                  </template><p>
                    <i>Data location:
                      <span id="data_location">[[_dataLocation]]</span></i>
                  
                
              <p>
            </div>
          </template>
          <template is="dom-if" if="[[_showNoSuchDashboardMessage]]">
            <div class="warning-message">
              <h3>
                There’s no dashboard by the name of
                “<tt>[[_selectedDashboard]]</tt>.”
              </h3>
              <template is="dom-if" if="[[_activeDashboardsLoaded]]">
                <p>You can select a dashboard from the list above.</template>

              <p>
                <i>Last reload: [[_lastReloadTime]]</i>
                <template is="dom-if" if="[[_dataLocation]]">
                  </template><p>
                    <i>Data location:
                      <span id="data_location">[[_dataLocation]]</span></i>
                  
                
              <p>
            </div>
          </template>
          <template is="dom-repeat" id="dashboards-template" items="[[_dashboardData]]" as="dashboardDatum" on-dom-change="_onTemplateChanged">
            <div class="dashboard-container" data-dashboard$="[[dashboardDatum.plugin]]" data-selected$="[[_selectedStatus(_selectedDashboard, dashboardDatum.plugin)]]">
              
            </div>
          </template>
        </div>
      </div>
    </paper-header-panel>

    <style>
      :host {
        height: 100%;
        display: block;
        background-color: var(--paper-grey-100);
      }

      #toolbar {
        background-color: var(
          --tb-toolbar-background-color,
          var(--tb-orange-strong)
        );
        -webkit-font-smoothing: antialiased;
      }

      .toolbar-title {
        font-size: 20px;
        margin-left: 10px;
        text-rendering: optimizeLegibility;
        letter-spacing: -0.025em;
        font-weight: 500;
        display: var(--tb-toolbar-title-display, block);
      }

      .toolbar-message {
        opacity: 0.7;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        font-weight: 500;
      }

      paper-tabs {
        flex-grow: 1;
        width: 100%;
        height: 100%;
        --paper-tabs-selection-bar-color: white;
        --paper-tabs-content: {
          -webkit-font-smoothing: antialiased;
          text-transform: uppercase;
        }
      }

      paper-dropdown-menu {
        --paper-input-container-color: rgba(255, 255, 255, 0.8);
        --paper-input-container-focus-color: white;
        --paper-input-container-input-color: white;
        --paper-dropdown-menu-icon: {
          color: white;
        }
        --paper-dropdown-menu-input: {
          -webkit-font-smoothing: antialiased;
          font-size: 14px;
          font-weight: 500;
        }
        --paper-input-container-label: {
          -webkit-font-smoothing: antialiased;
          font-size: 14px;
          font-weight: 500;
        }
      }

      paper-dropdown-menu paper-item {
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
      }

      #inactive-dashboards-menu {
        --paper-listbox-background-color: var(
          --tb-toolbar-background-color,
          var(--tb-orange-strong)
        );
        --paper-listbox-color: white;
      }

      .global-actions {
        display: inline-flex; /* Ensure that icons stay aligned */
        justify-content: flex-end;
        align-items: center;
        text-align: right;
        color: white;
      }

      .global-actions a {
        color: white;
      }

      #toolbar-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      #content-pane {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: stretch;
        width: 100%;
      }

      #content {
        flex: 1 1;
        overflow: hidden;
      }

      .dashboard-container {
        height: 100%;
      }

      /* Hide unselected dashboards. We still display them within a container
         of height 0 since Plottable produces degenerate charts when charts are
         reloaded while not displayed. */
      .dashboard-container:not([data-selected]) {
        max-height: 0;
        overflow: hidden;
        position: relative;
        /** We further make containers invisible. Some elements may anchor to
            the viewport instead of the container, in which case setting the max
            height here to 0 will not hide them. */
        visibility: hidden;
      }

      .dashboard-container iframe {
        border: none;
        height: 100%;
        width: 100%;
      }

      .warning-message {
        max-width: 540px;
        margin: 80px auto 0 auto;
      }

      [disabled] {
        opacity: 0.2;
        color: white;
      }

      #reload-button.refreshing {
        animation: rotate 2s linear infinite;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </template>
  
  
</dom-module>

<body>
  <tf-tensorboard use-hash brand="TensorBoard"></tf-tensorboard>

<script src="index.js"></script>